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

常用的js固定层代码

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

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

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

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

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

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

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

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

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