Bootstrap附加导航插件

一．附加导航
附加导航即粘贴在屏幕某处实现锚点功能。
//基本实例。
<body data-spy="scroll" data-target="#myScrollspy">

<div class="container">
<div class="jumbotron" >
<h2>Bootstrap Affix</h2>
</div>
<div class="row">
<div class="col-xs-3" id="myScrollspy">
<ul 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-4">第五部分</a></li>
</ul>
</div>
<div class="col-xs-9">
<h3 id="section-1">第一部分</h3>
<p>...</p>
<h3 id="section-2">第二部分</h3>
<p>...</p>
<h3 id="section-3">第三部分</h3>
<p>...</p>
<h3 id="section-4">第四部分</h3>
<p>...</p>
<h3 id="section-5">第四部分</h3>
<p>...</p>
</div>

</div>
</div>

//导航的 CSS 部分
ul.nav-pills { width: 200px;
}
ul.nav-pills.affix{ top: 30px;
}

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

我们默认使用的是 top，当然也可以默认居底 bottom。这个定位方式是直接通过 CSS
定位的。
//设置成 bottom
ul.nav-tabs.affix-bottom{ bottom : 30px;
}

//设置成 bottom
$('#myAffix').affix({ offset: {
bottom: 150
}
})

Affix 包含几个事件，如下：

Bootstrap 附加导航插件

成都创新互联秉承实现全网价值营销的理念，以专业定制企业官网，网站建设、网站制作，小程序定制开发，网页设计制作，移动网站建设，全网营销推广帮助传统企业实现“互联网+”转型升级专业定制企业官网,公司注重人才、技术和管理，汇聚了一批优秀的互联网技术人才,对客户都以感恩的心态奉献自己的专业和所长。

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

网页名称：Bootstrap附加导航插件
文章出自：https://www.cdcxhl.com/article48/jhcohp.html

成都网站建设公司_创新互联，为您提供营销型网站建设、企业网站制作、App开发、服务器托管、网站内链、品牌网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容