jQuery实现侧边栏跟随浏览器滚动固定显示

效果一：侧边栏固定模块
来源：卢松松博客

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";
            }
        };
    }
})();注：为了减少js文件引用，这段代码可放入任意JS文件中
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>

注：这里可以放文章列表、联盟广告，总之是个提高点击率的好方法。wordpress用户把此段代码添加到sidebar.php的侧栏位置即可。
特别提示：此代码试用与任何CMS系统，但该特效在IE6下无法实现，其余浏览器均没问题，同时侧栏其余部分应使用静态文件调用，使用JS调用栏目会出现代码重叠现象，调用联盟广告没问题。

效果二：侧边栏随窗口滚动（滑动效果）
来源：知更鸟
实现这个随窗口滚动效果，首先主题必须加载jQuery。已经完美解决侧边栏会顶着页脚无限滚下去的bug，一起看看代码：

 代码如下 复制代码
<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'), //滚动到此区块的时候开始随动
 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);
 }
});

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

效果四：JQUERY SCROLL FOLLOW

Sidebar Follow插件
插件地址：sidebar follow

来自wuzhao写的插件，当页面滚动到跟随区域下方，跟随区域将固定在窗口上。适用于所有网站侧边栏。兼容IE8。

具体使用请查看此开源项目，还是比较方便的。希望自己也尽快学好js，写一些自己常用的优秀的插件来。

3 jQuery代码
如果嫌引用代码还不够方便，并且想尽可能的给页面“减负”，也可以使用如下代码：

JS

//侧栏跟随浏览器

 代码如下 复制代码

$(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代码：

 代码如下 复制代码

<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>

修改 #sidebar 为你网站侧边栏选择器名称即可。

时间： 2024-09-22 09:08:53

jQuery实现侧边栏跟随浏览器滚动固定显示的相关文章

jquery 页面侧边栏跟随屏幕滚动效果

功能描述 首先, 我认为该功能不应该出现在 IE6 中, 因为 IE6 不支持原生的 position:fixed 来固定元素位置, 如果我们使用类似回到顶部按钮淡入淡出或者滑动的跟随, 因为跟随区块较大, 这将会令用户感到不适. 当页面滚动条在跟随区域下方, 那么跟随区域变为浮动, 跟随页面滚动; 如果滚动条回到元素上方, 跟随区域回到原来的位置上. 现在就可以滚动看看本博客侧边栏的效果. 参数描述 •element: 跟随区域的节点对象. •prevElement: 上方的节点对象. (已经

JS+CSS实现侧边栏跟随浏览器滚动效果

看月光博客,卢松松博客,文章页的侧边栏都可以随着浏览器滚动而停留在页面,羡慕了吧.其实我们也可以用这种特效的呢.下面,就讲讲如何实现这个效果吧~这个是卢松松博客原创的,我稍稍介绍了一下而已哈! 一:这个效果有什么用 现在很多网站都有这种效果,比如月光博客,卢松松博客,当你一篇文章写的较长,而且评论较多的时候,这个功能就可以帮你提高浏览量,用户在你的博客里面的跳出率也会随之减少.如果你在这放个广告,效果会很不错! 二:如何实现这个功能 亲,采用JS+CSS就可以实现这个功能了 三:实现侧边栏跟随特

jQuery 顶部导航跟随滚动条滚动固定浮动在顶部_jquery

  复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>

js侧边栏跟随屏幕滚动效果代码

侧边栏跟随屏幕滚动效果,现在已经很流行了.尤其是博客跟资讯类网站,在主页面比较长的情况下,侧边栏跟随屏幕滚动,能够极大的增加用户粘度,提高网站pv的.所以在此推荐这个经典js特效. 这个效果的用法很简单,引入js,在侧边栏写一个div,加上id:sidebar-follow.在里面写内容即可. 注意事项: 一.id="sidebar-follow".这个div上面好像必须得有内容. 二.需要给id:sidebar-follow加上一个宽度,宽度一般跟侧边栏宽度一样. 三.这个特效是原生

jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法_jquery

 如果版本是: 1.3.1 IE无法显示关闭按钮 如果版本是: 1.3.4 IE6无法显示关闭按钮 解决办法: Version: 1.3.1 打开fancybox.css 注释掉此行: .fancybox-ie #fancybox-close { background: transparent; filter: progid : DXImageTransform.Microsoft.AlphaImageLoader ( src = 'images/fancy_close.png', sizing

Jquery实现侧边栏跟随滚动条固定

 侧边栏随滚动条上下滚动,始终固定在一个位置的功能,现在很多网站和博客都有这个功能 部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告.   jQuery代码:    代码如下: var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改 var offset = rollSet.offset(); $(window).scroll(functi

Jquery实现侧边栏跟随滚动条固定（兼容IE6）_jquery

部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告. jQuery代码: 复制代码 代码如下: var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改var offset = rollSet.offset();$(window).scroll(function () { // 检查对象的顶部是否在游览器可见的范围内 var scrollTop

wordpress实现侧边栏跟随页面滚动效果

1.百度下载sidebar-follow-jquery:点击下载 2.将下载的文件放到所用主题的js文件夹下,引入该插件,在标签(一般在footer.php文件内)之前添 加以下代码:    代码如下 复制代码   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    <script src="<?php echo get_template_directo

博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)_javascript技巧

当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提