jQuery实现侧边栏随窗口滚动

发布时间:2020-05-06

摘要

近日帮人作主题要求弄个侧边栏某个模块随窗口一起滚动,可能其它童鞋也想给主题加上这个小功能,贴出来,供大家参考。

方法很简单,前提是你的主题必须已加载了jQuery。把下面代码加到主题头部header.php模版中即可,根据不同的主题模版,自行修改一下其中的DIV标签#sidebar名称。

HotNews主题也可使用该功能,默认是整个侧边栏随窗口滚动,受主题布局功能限制,单独滚动某个模块效果不是很理想。

近日帮人作主题要求弄个侧边栏某个模块随窗口一起滚动,可能其他童鞋也想给主题加上这个小功能,贴出来,供大家参考。

方法一:

很简单,前提是你的主题必须已加载了jQuery。

把下面代码加到主题头部header.php模版中即可:

  1. <script type=“text/javascript”>   
  2. $(function() {
  3.     var $sidebar   = $(“#sidebar”),   
  4.         $window    = $(window),   
  5.         offset     = $sidebar.offset(),   
  6.         topPadding = 15;   
  7.   
  8.     $window.scroll(function() {   
  9.         if ($window.scrollTop() > offset.top) {   
  10.             $sidebar.stop().animate({   
  11.                 marginTop: $window.scrollTop() – offset.top + topPadding   
  12.             });   
  13.         } else {   
  14.             $sidebar.stop().animate({   
  15.                 marginTop: 0   
  16.             });   
  17.         }   
  18.     });   
  19.   
  20. });   
  21. </script>  

可根据不同的主题模版,自行修改一下其中的DIV标签#sidebar名称。此方法兼容所有浏览器。

演示效果

HotNews主题也可使用该功能,默认是整个侧边栏随窗口滚动,受主题布局功能限制,单独滚动某个模块效果不是很理想。

参考自:http://css-tricks.com/scrollfollow-sidebar/

方法二:

本人未试过,可以自行参阅:js页面滚动时层智能浮动定位实现

  1. $.fn.smartFloat = function() {  
  2.     var position = function(element) {  
  3.         var top = element.position().top, pos = element.css(“position”);  
  4.         $(window).scroll(function() {  
  5.             var scrolls = $(this).scrollTop();  
  6.             if (scrolls > top) {  
  7.                 if (window.XMLHttpRequest) {  
  8.                     element.css({  
  9.                         position: “fixed”,  
  10.                         top: 0  
  11.                     });      
  12.                 } else {  
  13.                     element.css({  
  14.                         top: scrolls  
  15.                     });      
  16.                 }  
  17.             }else {  
  18.                 element.css({  
  19.                     position: “absolute”,  
  20.                     top: top  
  21.                 });      
  22.             }  
  23.         });  
  24.     };  
  25.     return $(this).each(function() {  
  26.         position($(this));                           
  27.     });  
  28. };  
  29. $(“#float”).smartFloat();  

 

大熊wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。大熊wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18324743309,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”互联网推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体互联网推广吧,我们和你一起,开创互联网大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。