JavaScript   /   59

我们在访问一些电商网站如淘宝,聚划算或者是一些淘宝客站点如bb霜排行榜,麦麦网时,经常能看到一个“侧栏跟随”的导航效果,当商品页面展示很长的时候,侧栏的导航条内容会跟随滚动,这样方便了用户切换到不同商品类目浏览商品,是电商网站的核心标配特效。

这种特效对提高网站浏览量、商品点击率、广告点击量都有一定效果。

效果范例截图:

侧栏跟随滚动内容块

在这里推荐几款使用 来实现侧栏跟随滚动条的插件,使用方便,很容易集成进自己的网站当中去。当然,他们都有一个必须要做的步骤,那就是先引入jquery.js 标准库。

特效演示

使用:

<script type="text/javascript" src="jquery.js"></script>// 引入jquery标准库<script type="text/javascript" src="jquery.sticky.js"></script>// 引入sticky插件
<script type="text/javascript">// <![CDATA[
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0}); // 将#sticker可以换成自己想要让其滚动的DIV容器ID
  });
// ]]></script>

特效演示

使用:

<script type="text/javascript" src="jquery.js"></script>// 引入jquery标准库<script type="text/javascript" src="jquery.lockfixed.js"></script>// 引入lockfixed插件
<script type="text/javascript">// <![CDATA[
(function($) {
	$.lockfixed("#sidebar .menu",{offset: {top: 10, bottom: 410}}); // 将#sidebar .menu可以换成自己想要让其滚动的DIV容器ID,#sidebar和.menu是嵌套关系哦~
})(jQuery);
// ]]></script>

最后,点击获取标准库下载

网络发现者(aiwei.us)是梁道科技旗下以企业建站,微信开发,视觉设计为主要服务项目的互联网品牌。

我们为企业提供各类互联网平台项目的咨询顾问服务。依靠丰富的互联网实践经验,我们为企业从项目可行性分析,执行策略及方案等方方面面提供合理化建议。