利用bootstrap的滚动监听+affix做一个侧导航landingpage

前段时间有个小的需求,要做一个带侧边导航的landingpage。这种页面直观点来说,就是类似百度百科一样,随着页面的滚动,在旁边的导航栏会跟踪你的页面,作为一个活动书签。如图,红框就是侧导航:

百度百科侧边导航

要是直接重新写的话,也是一件有工作量的事情,所以干脆直接用bootstrap框架,里面js插件有滚动监听和affix,结合起来就可以做出来类似的效果。

ps:用的是bootstrap3

滚动监听

bootstrap的scroll.js是用来滚动监听的,而使用起来最便利的方法是直接引用在html代码里加data属性。

滚动监听都需要被监听的组件是position: relative; 即相对定位方式。大多数时候是监听 元素,所以直接在body的style里面加上这个属性即可。

然后继续在body里面加data属性,一个是data-spy,一个是data-target
data-spy的值直接设置成"scroll"即可,而data-target则要设置成导航栏的id。实例代码如下:

<body style="position: relative;" data-spy="scroll" data-target="#navbar-example">
  ...



<div id="navbar-example">



<ul class="nav nav-tabs" role="tablist">
      ...
    </ul>



  </div>



  ...
</body>

affix固定侧导航

affix的英文意思粘贴的意思,顾名思义,它的作用就是是网页中的元素固定粘贴在某个位置,而我们的侧边栏恰好就是要这样的效果。

使用方法也很简单,在侧导航加一个data-spy="affix"属性就可以了,可选项为data-offset,可以是data-offset-top或者data-offset-bottom,比如data-offset-top="60",效果就是当页面距离顶部60像素之后,才开始固定这个元素(侧导航),如果不用这个可选项,则侧导航是一直黏在固定位置的。

侧导航landingpage例子

效果是这样的:https://www.lookfor404.com/langding-page-example.html

全程都是用的data属性,其中,affix的属性,我没有加上data-offset,另外就是对“返回顶端”写了几行jquery,返回顶端的时候有滚动效果,代码如下:

<script type="text/javascript">
    $(function(){  
            $("#back-to-top").click(function(){  
                $('body,html').animate({scrollTop:0},1000);  
                return false;  
            });  
      });
    </script> 

完整代码直接在网页右键–查看源代码就行了,这里就不贴出来了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注