您现在的位置是：首页 > 博客网站制作 > 网站建设教程网站建设教程

常用的js固定层代码

杨青青2018-06-06【网站建设教程】人已围观

简介网页中常会用到固定层这样的效果，可以放广告，可以放标签，可以放关注。非常感谢沧海一粟，是他帮我优化了代码，现在我把代码分享出来。

网页中常会用到固定层这样的效果，可以放广告，可以放标签，可以放关注。非常感谢沧海一粟，是他帮我优化了代码，现在我把代码分享出来。

js代码如下：

if ($('#follow-us')){
var followUsPosition = $('#follow-us').offset().top;
window.onscroll = function () {
var nowPosition = document.documentElement.scrollTop;
if (nowPosition - followUsPosition > 0 ) {
setTimeout(function () {
$('#follow-us').attr('class','guanzhu gd');
},150);
}else {
$('#follow-us').attr('class','guanzhu');
}
};
}
});

Html:

<div class="guanzhu" id="follow-us">
<h2 class="hometitle">关注我们么么哒！</h2>
<ul>
<li class="sina"><a href="/" target="_blank"><span>新浪微博</span>杨青博客</a></li>
<li class="tencent"><a href="/" target="_blank"><span>腾讯微博</span>杨青博客</a></li>
<li class="qq"><a href="/" target="_blank"><span>QQ号</span>476847113</a></li>
<li class="email"><a href="/" target="_blank"><span>邮箱帐号</span>dancesmiling@qq.com</a></li>
<li class="wxgzh"><a href="/" target="_blank"><span>微信号</span>yangqq_1987</a></li>
<li class="wx"><img src="images/wx.jpg"></li>
</ul>
</div>

/*gd*/

.gd { width: 300px; top: 100px; z-index: 999; position: fixed; _position: absolute; _top:expression(documentElement.scrollTop + 0 + "px");
_margin-top: 100px; }

js 固定层