JS实现页面侧边栏浮动跟随,jQuery实现侧边栏跟随浏览器滚动固定显示

老牛  2016-06-18 17:14  阅读 901 views 次 评论 0 条

效果一:侧边栏固定模块

//侧栏跟随JS,放入header中引用或者放入其他加载的js文件中
(function() {
    var oDiv = document.getElementById("float");
    var H = 0,
    iE6;
    var Y = oDiv;
    while (Y) {
        H += Y.offsetTop;
        Y = Y.offsetParent
    };
    iE6 = window.ActiveXObject && !window.XMLHttpRequest;
    if (!iE6) {
        window.onscroll = function() {
            var s = document.body.scrollTop || document.documentElement.scrollTop;
            if (s > H) {
                oDiv.className = "div1 div2";
                if (iE6) {
                    oDiv.style.top = (s - H) + "px";
                }
            } else {
                oDiv.className = "div1";
            }
        };
    }
})();

CSS代码:

/*侧栏跟随*/
#box_float {float:left; position:relative; width:250px;}
.div1 {width:250px;}
.div2 {position:fixed; _position:absolute; top:0; z-index:999;}注:样式代码仅为参考,具体的调整,请结合自己的网站调整。
HTML代码:
<div id="box_float">
  <div id="float" class="div1">
  这里写你网站的代码与标签
  </div>
</div>

效果二:侧边栏随窗口滚动(滑动效果)

<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $("#sidebar").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $("#sidebar").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 368);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});
</script>

将上述javascript代码加到主题头部header.php模版中。修改其中的#sidebar为你的主题侧边选择器名称;根据不同的主题头部模版高度,适当调整其中的数字“368”。

效果三:添加侧边栏随滚动条滚动效果(无滑动)
如果你的侧边栏之前已经有了这些class标志加以区分,只要使用就可以了,不用另外加。
否则需要给侧边栏的各个模块加上一些class标志,如下图框框里面的内容:
在主题的js文件中加上如下代码:

var rollStart = $('.Statistics'), //滚动到.Statistics区块的时候开始随动
 rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块
 rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块
rollStart.before('<div class="rollbox" style="position:fixed;width:inherit;"></div>');
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();
objWindow.scroll(function() {
 if (objWindow.scrollTop() > offset.top){
  if(rollBox.html(null)){
   rollSet.clone().prependTo('.rollbox');
  }
  rollOut.fadeOut();
  rollBox.show().stop().animate({top:0,paddingTop:10},400);
 } else {
  rollOut.fadeIn();
  rollBox.hide().stop().animate({top:0},400);
 }
});

注:滚动区域的内容不能太长,不然会出现无限下拉的情况。

直接用代码一:
如果嫌引用代码还不够方便,并且想尽可能的给页面“减负”,也可以使用如下代码:

$(function () {
    if ($(".fixed_side").length > 0) {
        var offset = $(".fixed_side").offset();
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();
            //如果距离顶部的距离小于浏览器滚动的距离,则添加fixed属性。
            if (offset.top < scrollTop) $(".fixed_side").addClass("fixed");
            //否则清除fixed的css属性
            else $(".fixed_side").removeClass("fixed");
        });
    }
});

CSS如下:

.fixed{position:fixed; top:20px; width:250px;}

直接用代码二:
另外还有带滑动效果的侧边栏随窗口滚动jQuery代码:
修改下面的#sidebar 为你网站侧边栏选择器名称即可。

<script>
var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $("#sidebar").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $("#sidebar").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 300);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});
</script>
本文地址:http://xiaohost.com/1496.html
版权声明:本文为原创文章,版权归 老牛 所有,欢迎分享本文,转载请保留出处!

发表评论


表情