Js实现下拉滚动条（导航滚动数值>100的话自动吸附在TOP上）

最新推荐文章于 2021-10-24 00:56:46 发布

转载最新推荐文章于 2021-10-24 00:56:46 发布 · 2.5k 阅读

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用jQuery实现页面元素在特定滚动位置时进行浮动定位的动态调整，通过观察滚动条位置来判断并应用透明度效果，增强用户体验。

本人做的实例看 new.51xiudou.com
这是JQ代码

当然记得要引入JQ的 CDN
$(document).ready(function(){
//当滚动条的位置处于距顶部100像素以下时，浮动登录层飘浮
 $(function () {$(window).scroll(function(){if ($(window).scrollTop()>100){$(".xd-nav").addClass("float_login_fix");}else{$(".xd-nav").removeClass("float_login_fix");}});});
});

此段代码是JQUERY实现后addClass添加的样式 有透明的
.float_login_fix{
 top:0px;
 POSITION:fixed;/*固定定位*/
 _POSITION: absolute;/*兼容IE6*/
 _top:       expression(eval(document.compatMode &&
 document.compatMode=='CSS1Compat') ?
 documentElement.scrollTop :/*IE6*/
            document.body.scrollTop);/*IE5 IE5.5*/
 z-index:500;
 /*透明*/
 filter:alpha(opacity=80); /* IE */
 -moz-opacity:0.8; /* Moz + FF */
 opacity: 0.8;
}