码迷,mamicode.com
首页 > 其他好文 > 详细

(十八) 附加导航插件

时间:2018-06-17 17:51:19      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:ack   nav   高亮   width   bottom   contain   数据   ott   inf   

一.附加导航 

  • 附加导航即粘贴在屏幕某处实现锚点功能。  
<head>
    <title>boostrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="<%=path%>/script/bootstrap/css/bootstrap.css">
    <style>
        ul.nav-pills {
            width: 200px;
        }

        ul.nav-pills.affix {
            top: 30px;
        }

    </style>
</head>
<body data-spy="scroll" data-target="#myScrollspy">

<div class="container">
    <div class="jumbotron" style="height: 150px">
        <h2>Bootstrap Affix</h2>
    </div>
    <div class="row">
        <div class="col-xs-3" id="myScrollspy">
 
            <ul id="myAffix" class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="150">
                <li class="active"><a href="#section-1">第一部分</a></li>
                <li><a href="#section-2">第二部分</a></li>
                <li><a href="#section-3">第三部分</a></li>
                <li><a href="#section-4">第四部分</a></li>
                <li><a href="#section-5">第五部分</a></li>
            </ul>
        </div>
        <div class="col-xs-9">
            <h2 id="section-1">第一部分</h2>
            <p style="line-height:2">
                这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。</p>
            <h2 id="section-2">第二部分</h2>
            <p style="line-height:2">
                这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。</p>
            <h2 id="section-3">第三部分</h2>
            <p style="line-height:2">
                这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。</p>
            <h2 id="section-4">第四部分</h2>
            <p style="line-height:2">
                这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。</p>
            <h2 id="section-5">第五部分</h2>
            <p style="line-height:2">
                这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面,在感恩节之前,很多零售商就已提供了优惠折扣,从而冲淡了黑色星期五的影响力。过去几周,电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示,今年黑色星期五,美国电商销售总额同比增长14%,达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年,电子邮件推广带来的销售额增长了25%。</p>
        </div>
    </div>
</div>


<script src="<%=path%>/script/jquery-3.2.1.min.js"></script>
<script src="<%=path%>/script/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>
</body>

 

  • 实现的效果如下图,导航栏随着内容的改变而高亮显示相应的导航栏目,图中橙色部分即是该功能的实现,

 

技术分享图片

技术分享图片

 

  •  JavaScript 代替 data-spy="affix" data-offset-top="125" 
$(‘#myAffix‘).affix({
 offset: { top: 150
 } })

 

  •  默认使用的是 top,当然也可以默认居底 bottom。这个定位方式是直接通过 CSS 定位的。
//css设置成bottom 

ul.nav-tabs.affix-bottom{
bottom : 30px;
}
 //js设置成 bottom

$(‘#myAffix‘).affix({
offset: { bottom: 150 }
})

 

  •  事件

 技术分享图片

//其他雷同
 $(‘#myAffix‘).on(‘affixed-top.bs.affix‘, function () {
 alert(‘触发!‘); 
});

 

(十八) 附加导航插件

标签:ack   nav   高亮   width   bottom   contain   数据   ott   inf   

原文地址:https://www.cnblogs.com/shyroke/p/9193135.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!