WordPress边栏随窗口浮动的方法

Timle.CN:专注 WordPress建站WordPress主题WordPress插件 分享,同时也关注各种 建站资源前端技巧免费资源IT互联网热点 。CTRL+D即可收藏本站,我们期待您的再次光临!

[文章目录]

我们在浏览别人博客的时候,有时候文章或者很长,拉到底下的时候想点其他页面还点拉到最上面。就想着能不能修改一下,提高一下用户体验度。

百度谷歌上搜索了半天,找到了现在这个代码,效果可随便开一篇比较长的文章看。我把随机文章放在小工具的最后一个,当下拉时浏览器碰到随机文章的上边时,会把随机文章往下顶。

固定式随窗口浮动

  • 方法1
  • 1、加载jquery库,现在一般主题都自带的Minjquery;具体不说了;
    2、在主题文件的JS文件中添加以下代码:

    $.fn.smartFloat = function() { 
        var position = function(element) { 
            var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离 
            var pos = element.css("position"); //当前元素距离页面document顶部的距离 
            $(window).scroll(function() { //侦听滚动时 
                var scrolls = $(this).scrollTop(); 
                if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度 
                    if (window.XMLHttpRequest) { //如果不是ie6 
                        element.css({ //设置css 
                            position: "fixed", //固定定位,即不再跟随滚动 
    			width: "290px",//设定浮动小工具宽度
                            top: 15 //距离页面顶部为0 
                        }); 
                    } else { //如果是ie6 
                        element.css({ 
                            top: scrolls  //与页面顶部距离 
                        });     
                    } 
                }else { 
                    element.css({ //如果当前元素element未滚动到浏览器上边缘,则使用默认样式 
                        position: pos,
                        top: top 
                    });
                } 
            }); 
        }; 
        return $(this).each(function() { 
            position($(this));                          
        }); 
    }; 
    //绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"   
    $(function(){ 
        $(".widget_follow").smartFloat(); 
    });
    

    3、把需要浮动的窗口容器加入:class="widget_follow"的标签,例如Timle.CN的边栏浮动窗口:

     <div class="widget_follow"></div>

    如果有多个边栏浮动,那么,在这些边栏容器上添加个父级容器即:

    <div class="widget_follow">
    <div class="widget">内容1</div>
    <div class="widget">内容2</div></div>
    

    4、收工,去前台看看效果吧!

  • 方法2
  • 1、在主题文件的JS文件中添加以下代码:
    //sidebar-follow
        $(function() {
            $(window).scroll(function() {
                var scroll_top = $(window).scrollTop();            
                if ($('#scroll_box').length > 0) {
                    var sb_top = $('#scroll_box').offset().top-20;
                    if (sb_top < scroll_top) {
                        $('#scroll_box .slide-box-scroll').addClass('follow');
                    } else {
                        $('#scroll_box .slide-box-scroll').removeClass('follow');
                    }
                }
            });
        });
    

    2、在需要浮动的小工具上添加以下:

    <?php if( is_active_sidebar('widget_follow') ) { ?>
     <div id="scroll_box">
     <div class="slide-box-scroll">
     <?php dynamic_sidebar('widget_follow'); ?>
     </div>
     </div>
    <?php }?>
    

    3、CSS文件中添加以下:

    /*浮动跟随*/
    .widget h3,.slide-box-scroll h2{padding:5px;text-transform:uppercase;font-weight:bold;font-size:14px;line-height:1.5em;border-bottom: 1px solid #ededed;}
    #scroll_box .follow{position:fixed;top:0;margin-top:15px;width:290px;}
    

方法1,2都同样的固定浮动样式,如右侧所示效果。本站采用方法2

弹性浮动窗口

与方法一基本一致,就是把第二步的代码换成以下代码:

//float right
jQuery(document).ready(function($){    
//将下一行引号中的内容替换成你想要下拉的模块 的ID或者CLASS名字,如"#ABC",".ABC"    
    var $sidebar   = $(".sidebar"),     
        $window    = $(window),       
        offset     = $sidebar.offset(),       
        topPadding = 20;//修改距顶间距
    $window.scroll(function() {       
        if ($window.scrollTop() > offset.top) {       
            $sidebar.stop().animate({       
                marginTop: $window.scrollTop() -  offset.top + topPadding       
            });       
        } else {       
            $sidebar.stop().animate({       
                marginTop: 0       
            });       
        }       
    });       
});

这个和固定的有些不同,这里只要在一个窗口中加入class="sidebar"标签后,这个窗口以下的容器内容都会随着浮动!

这里Timle.CN说下,上述二种浮动方式都有点问题,那就是浮动内容过长,超出窗口高度后,第一种会直接插入页尾,破坏页面整体感观;第二种超出窗口高度后,会把底部内容向下“弹”; 所以,最好浮动窗口不要太多,内容过长!

版权声明:本站所有文章和资源使用CC BY-NC-SA 3.0 CN协议发布,转载应当以相同方式注明并注明文章来自“Timle.CN -> WordPress边栏随窗口浮动的方法”。在页面右边可以分享本文哦!

有 6 发吐槽 关于 “WordPress边栏随窗口浮动的方法

  1. 沙发
    鱼里别放刺 2014-08-12
    多谢楼主的分享,学习了。
  2. 板凳
    晓午林枫 2014-08-13
    学习了,我用的插件虽然方便些但是效果没有你这个好。
    • 回复
      Timle.CN 2014-08-13
      @晓午林枫 共同学习,我也有好多不懂的,我现在把能去掉的插件都去掉了。感觉还可以。
  3. 地板
    ScottJu 2015-10-28
    方法二“在需要浮动的小工具上添加以下: 这里的代码怎么加?
  4. 4楼
    跨境电商平台 2016-08-26
    非常不错!!!!

疑问 难过 胜利 微笑 抠鼻 可爱 抓狂 偷笑 奋斗 衰 撇嘴 色 贼笑 爬虫 鼓掌 发怒 擦汗 握手 酷 玫瑰 哭 呲牙

WordPress边栏随窗口浮动的方法
2 票, 5.00 平均等级 ( 98% 分 )