我爱自学

 找回密码
 会员注册

QQ登录

只需一步,快速开始

网页滚动到特定高度时 通过jquery固定侧边栏

网上查找资料时,经常看到有的网页滚动到一定高度时,侧边栏就跟随一起移动。本文分享通过jquery固定侧边栏的实现方法。
在一些分栏的网站布局中,即左侧或右侧为网页主体,另一侧为侧边栏或工具栏的布局,经常会出现网页主体是一个长页面,类似很多的博客网站。这种情况为了让侧边栏一直可以被用户看到,就需要让侧边栏元素的position为fixed,固定在浏览器的固定位置。

本文我爱自学小编以114好帮手导航为例,分享通过 jquery固定侧边栏的实现方法。.


$(document).ready(function(){
                $(document).scroll(function(){
                        var topheight =$(document).scrollTop();//获取浏览器滚动条滚动的高度
                        if(topheight>210){
                                $("#leftside").css({"position":"fixed","bottom":"130px","z-index":"10"});
                        }
                        else{
                                $("#leftside").css({"position":"","top":"","z-index":""});
                        }
                });
        });

if(topheight>210) 该判断条件是当滚动的高度大于设定值时,固定侧边栏。这个要根据页面的具体情况变更,或者通过jquery获取页面某部分的高度。

注意:侧边栏应用了position:fixed的情况,要考虑另外的主体页面高度的问题。高度太低的情况,触发了固定操作后,滚动条可能会自动回到顶部。


点击阅读更多内容!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

手机版|小黑屋|我爱自学 ( 蜀ICP备19015358号-3 )

GMT+8, 2024-4-25 15:34 , Processed in 0.116329 second(s), 28 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

本站大部分教程是网站原创教程,一部分教程为我爱自学(http://www.5izixue.com)编辑收集整理。

如果您需要转载我爱自学网站教程,请注明“资料来源:我爱自学(5izixue)”字样并注明本站网址。

编辑收集整理的教程版权归原作者所有,本站只提供网友交流学习使用,请勿用于商业用途,如果该文章有任何侵犯您权益的地方,请联系我们(569705694@qq.com),我们将在第一时间进行处理!谢谢您的支持!

快速回复 返回顶部 返回列表