您现在的位置是：首页 > 网站制作 > 前端设计前端设计

常用的js固定层代码

胜于蓝2020-08-14【前端设计】人已围观

简介网页中常会用到固定层这样的效果，可以放广告，可以放标签，可以放关注。
js代码如下： 1
2
3
4
5
6
7
8
9
10
11
12
13
14 if ($('#follow-us')){
var followUs

网页中常会用到固定层这样的效果，可以放广告，可以放标签，可以放关注。ZQ8胜于蓝|优秀个人博客
ZQ8胜于蓝|优秀个人博客

js代码如下：ZQ8胜于蓝|优秀个人博客

1ZQ8胜于蓝|优秀个人博客
2ZQ8胜于蓝|优秀个人博客
3ZQ8胜于蓝|优秀个人博客
4ZQ8胜于蓝|优秀个人博客
5ZQ8胜于蓝|优秀个人博客
6ZQ8胜于蓝|优秀个人博客
7ZQ8胜于蓝|优秀个人博客
8ZQ8胜于蓝|优秀个人博客
9ZQ8胜于蓝|优秀个人博客
10ZQ8胜于蓝|优秀个人博客
11ZQ8胜于蓝|优秀个人博客
12ZQ8胜于蓝|优秀个人博客
13ZQ8胜于蓝|优秀个人博客
14 if ($('#follow-us')){ZQ8胜于蓝|优秀个人博客
var followUsPosition = $('#follow-us').offset().top;ZQ8胜于蓝|优秀个人博客
window.onscroll = function () {ZQ8胜于蓝|优秀个人博客
var nowPosition = document.documentElement.scrollTop;ZQ8胜于蓝|优秀个人博客
if (nowPosition - followUsPosition > 0 ) {ZQ8胜于蓝|优秀个人博客
setTimeout(function () {ZQ8胜于蓝|优秀个人博客
$('#follow-us').attr('class','guanzhu gd');ZQ8胜于蓝|优秀个人博客
},150);ZQ8胜于蓝|优秀个人博客
}else {ZQ8胜于蓝|优秀个人博客
$('#follow-us').attr('class','guanzhu');ZQ8胜于蓝|优秀个人博客
}ZQ8胜于蓝|优秀个人博客
};ZQ8胜于蓝|优秀个人博客
}ZQ8胜于蓝|优秀个人博客
});

Html: ZQ8胜于蓝|优秀个人博客

1ZQ8胜于蓝|优秀个人博客
2ZQ8胜于蓝|优秀个人博客
3ZQ8胜于蓝|优秀个人博客
4ZQ8胜于蓝|优秀个人博客
5ZQ8胜于蓝|优秀个人博客
6ZQ8胜于蓝|优秀个人博客
7ZQ8胜于蓝|优秀个人博客
8ZQ8胜于蓝|优秀个人博客
9ZQ8胜于蓝|优秀个人博客
10ZQ8胜于蓝|优秀个人博客
11 <div class="guanzhu" id="follow-us">ZQ8胜于蓝|优秀个人博客
<h2 class="hometitle">关注我们么么哒！</h2>ZQ8胜于蓝|优秀个人博客
<ul>ZQ8胜于蓝|优秀个人博客
<li class="sina"><a href="/" target="_blank"><span>新浪微博</span>杨青博客</a></li>ZQ8胜于蓝|优秀个人博客
<li class="tencent"><a href="/" target="_blank"><span>腾讯微博</span>杨青博客</a></li>ZQ8胜于蓝|优秀个人博客
<li class="qq"><a href="/" target="_blank"><span>QQ号</span>476847113</a></li>ZQ8胜于蓝|优秀个人博客
<li class="email"><a href="/" target="_blank"><span>邮箱帐号</span>dancesmiling@qq.com</a></li>ZQ8胜于蓝|优秀个人博客
<li class="wxgzh"><a href="/" target="_blank"><span>微信号</span>yangqq_1987</a></li>ZQ8胜于蓝|优秀个人博客
<li class="wx"><img src="images/wx.jpg"></li>ZQ8胜于蓝|优秀个人博客
</ul>ZQ8胜于蓝|优秀个人博客
</div>

/*gd*/ZQ8胜于蓝|优秀个人博客

1ZQ8胜于蓝|优秀个人博客
2 .gd { width: 300px; top: 100px; z-index: 999; position: fixed; _position: absolute; _top:expression(documentElement.scrollTop + 0 + "px");ZQ8胜于蓝|优秀个人博客
_margin-top: 100px; }