首页 / WordPress入门 / jQuery实现侧边栏随窗口滚动

jQuery实现侧边栏随窗口滚动

    • 珂李斯

    发布于

    by

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

    摘要

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

    方法很简单，前提是你的主题必须已加载了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入门、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！