WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › jQuery实现侧边栏随滚动条滚动并固定位置

jQuery实现侧边栏随滚动条滚动并固定位置

PCDotFan9年前

WP酷在之前分享过简单实现侧边栏跟随页面滚动效果,可该代码有一个重大缺陷——滑动的元素只能在最后面,否则会把其它内容盖住。有什么其它的好方法吗?草野时代博主总结了几个测试完美无BUG的实现侧边栏随滚动条滚动并固定位置代码,大家可以试一下。以下三种方法任选其一使用,需要按照自己网站的问题稍稍修改才能正常运行。

常用的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-->

 

侧边栏滚动结束时固定设定模块

利用这串代码,可以自动获取侧边栏高度,当侧边栏滚动结束后,设定的模块激活并固定在屏幕中,IE6无效。
默认支持两个模块,如果需要增加模块要在第二行添加变量并参照第8行的代码为新变量添加启动的参数。

jQuery(document).ready(function (a) {
        var c = 1,d = 2; //这里设定的是第1和第2
        a.browser.msie && 6 == a.browser.version && !a.support.style || (
        e = a("#sidebar").width(), f = a("#sidebar .widget"), g = f.length, g >= (c > 0) && g >= (d > 0) && a(window).scroll(function () {
                        var b = document.documentElement.scrollTop + document.body.scrollTop;
                        b > f.eq(g - 1).offset().top + f.eq(g - 1).height() ? 0 == a(".roller").length ? (f.parent().append('<div class="roller"></div>'),
                        f.eq(c - 1).clone().appendTo(".roller"),
                        c !== d && f.eq(d - 1).clone().appendTo(".roller"),
                        a(".roller").css({
                                position: "fixed",
                                top: 50,
                                zIndex: 0,
                                width: 250
                        }), a(".roller").width(e)) : a(".roller").fadeIn(300) : a(".roller").fadeOut(300)
         }))
});

 

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

下面这串代码适合侧边栏较长的用户,如有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
            });
        };
    });
});

 

34
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (13)
再想想
  • WordPress主题|http://www.wpmee.com/

    现在百度喜欢不会被ADBLOCK 屏蔽了。。。

    9年前
    • WP酷

      @WordPress主题|http://www.wpmee.com/ 啊啊百度喜欢?

      9年前
  • ikx.me iPhone越狱用户的福地

    学习一下

    9年前
  • 小清新头像吧

    很是不错,改天鼓捣鼓捣。

    9年前
  • 动力环境监控

    火狐有效不

    9年前
    • WP酷

      @动力环境监控 当然

      9年前
  • 酷剑

    可以试试这个插件,你说到的功能都有。http://caibaojian.com/scrollfix

    9年前
  • 外贸业务员

    [睡大觉] 过来支持一下值得收藏分享

    7年前
  • 番茄

    折腾,继续折腾当中。

    7年前
  • mrjucn

    为什么首次进入我博客的时候,侧边栏判断高度错误,跟上一个模块的部分重叠,刷新下首页,判断高度又正确了,这是为什么?求教呀。

    6年前
    • Tokin

      @mrjucn 先加载js再加载dom试一下,第二次进入你博客因为js缓存下来了,所以可以正常计算高度吧

      6年前
  • 枢纽

    第三种可以 去掉动画效果吗,直接固定。

    5年前
    • PCDotFan

      @枢纽 删去 $(“#sidebar”).stop().animate({ … });

      5年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
WordPress 终极加速系列 – 加速原理
6年前
WordPress 解决 Gravatar 头像无法打开问题 缓存本地化
8年前
Elegant – 单栏简洁风WordPress博客主题
9年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1