之前在网上找的几种侧边栏随滚动条而滚动固定位置的方法,都有一个缺陷,那就是侧边栏到底部的时候,会跟底部的footer内容重叠,也有部分好友跟我提起过这个缺陷,无奈只好科学上网搜一下更好的方法,果然搜到了,这里就跟大家分享一下吧。

首先我们还是要加载JQuery的,常用的CDN引用安装JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <!--Google-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <!--Microsoft-->

当滚动到指定模块时置顶该模块

下面这串代码适合侧边栏较长的用户,如有JavaScript加载的模块高度会判断出错,建议侧边栏没有JavaScript模块的用户使用。
当滚到#suggested时置顶该模块,可以按自己的需要修改。

jQuery(document).ready(function($) {
    $.fn.smartFloat = function() {
        var position = function(element) {
            var top = element.position().top,
            pos = element.css("position");
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                } else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
        };
        return $(this).each(function() {
            position($(this));
        });
    };
    //绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"
    $("#suggested").smartFloat();
});

滚动到一定像素后固定显示

类似于当滚动到指定模块时置顶该模块,不同之处是设定固定的高度,卷动到该高度时显示置顶的模块。

默认给出的是卷动368像素后侧边栏#sidebar整体跟随滑动,适合侧边栏少的网站。

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
            });
        };
    });
});

参考资料:https://www.mywpku.com/jquery-pin-elements.html