最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

如何实现智能侧边栏跟随固定范围浮动的效果

关于WordPress边栏跟随固定浮动效果网上一搜一大把,可真正能实现的没有几个。再加上需要手动修改代码,而教程写的都不那么完整详细,大家操作过程中就会遇到这样那样的问题。如:边栏遮挡底部footer、边栏会顶着页脚footer无限滚下去等等,这让对代码不是太熟悉的同学们苦不堪言,最后无奈放弃。所以今天码云笔记就为大家奉上具体实现方法,不会代码的小白都会操作哦。

为什么要使用边栏跟随效果?

目前很多网站都在使用边栏跟随效果,也就是随着滚动条的滚动边栏跟着滑动或者固定的效果。这样一来可以弥补当一个页面很长,而侧边栏太短的时候的产生空白,并且还可以合理利用空间展示更多信息,从而大大的提高网站浏览量、文章点击率。这样子的效果很适合于文章的列表与广告联盟的展示。

如何实现智能侧边栏跟随固定浮动的效果?

这里我推荐给大家一款jquery滚动固定侧边栏插件theia-sticky-sidebar.js,该jquery滚动固定侧边栏插件在页面向下滚动时,可以将左侧或右侧侧边栏固定在页面中。它特别适合于多列布局的页面,并能和bootstrap或Foundation配合使用。

插件的兼容性

本段代码兼容目前最新的各类主流浏览器,适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器,首选火狐浏览器。是一款不错的的特效插件,需要的朋友可以下载!

如何实现智能侧边栏跟随固定范围浮动的效果?

下面我把自己怎么实现“智能侧边栏跟随固定浮动的效果“的方法步骤分享给大家,非常简单的步骤!觉得喜欢或有帮助,就顶一顶哈!

友情提示:此方法不局限于 wordpress 中使用,也不局限于侧边栏!

HTML代码:

<html>
 <head></head>
 <body>
  <div class="wrapper"> 
   <div class="content">
    ...
   </div> 
   <div class="sidebar">
    ...
   </div> 
  </div>
 </body>
</html>

其中,sidebar是想要智能滑动的元素;

然后,引入 js:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="theia-sticky-sidebar.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.sidebar').theiaStickySidebar({
      // Settings
      additionalMarginTop: 30
    });
  });
</script>

其中,第一个 js,大多数主题已经带有了,可以不引入!第二个 theia-sticky-sidebar.js,可以去这里下载;第三个 js 中的.sidebar跟上面的对应,就是想要智能滑动的元素对应的选择器,class 或 id。

可用配置参数及说明:

  • containerSelector:侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。
  • additionalMarginTop:可选值。指定侧边栏的顶部margin值,单位像素,默认为0像素。
  • additionalMarginBottom:可选值。指定侧边栏的底部margin值,单位像素,默认为0像素。
  • updateSidebarHeight:是否更新侧边栏的高度。默认为true。
  • minWidth:如果侧边栏的宽度小于这个值,将恢复为正常尺寸。默认值为0。(该选项用于响应式设计)
  • defaultPosition:侧边栏必须是非static的定位方式。默认为relative定位方式。
  • namespace:绑定事件的命名空间。默认为TSS。

结束语

好了,以上就是jquery插件theia-sticky-sidebar.js实现的智能侧边栏跟随固定浮动的效果,至此已经实现了部署。是不是很简单呢,如果你也喜欢这样的侧边栏浮动效果的话,那就不要犹豫赶紧折腾吧。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何实现智能侧边栏跟随固定范围浮动的效果

发表评论