bootstrap附加导航插件

最新推荐文章于 2020-11-21 12:26:45 发布

傻小胖

最新推荐文章于 2020-11-21 12:26:45 发布

阅读量562

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/qq_34645412/article/details/76357451

版权

bootstrap 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一．附加导航
附加导航即粘贴在屏幕某处实现锚点功能。

//基本实例。

<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
  <div class="jumbotron" style="height:150px">
    <h1>Bootstrap Affix</h1>
  </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">
      <h2 id="section-1">第一部分</h2>
      <p>...</p>
      <h2 id="section-2">第二部分</h2>
      <p>...</p>
      <h2 id="section-3">第三部分</h2>
      <p>...</p>
      <h2 id="section-4">第四部分</h2>
      <p>...</p>
      <h2 id="section-5">第四部分</h2>
      <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
}
})

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

傻小胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap附加导航插件

一．附加导航附加导航即粘贴在屏幕某处实现锚点功能。//基本实例。data-spy="scroll" data-target="#myScrollspy">class="container"> class="jumbotron" style="height:150px"> Bootstrap Affix class="row"> class="col-
复制链接

扫一扫

专栏目录