欢迎光临
我们一直在努力

常用的js固定层代码效果,可用于广告,标签,关注,个人信息

网页中常会用到固定层这样的效果,可以放广告,可以放标签,可以放关注。代码如下

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>1449585010</a></li>
       <li class="email"><a href="/" target="_blank"><span>邮箱帐号</span>xinqidianblog@qq.com</a></li>
       <li class="wxgzh"><a href="/" target="_blank"><span>微信号</span>1449585010</a></li>
       <li class="wx"><img src="images/wx.jpg"></li>
     </ul>
   </div>

CSS:

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

 

赞(0) 打赏
未经允许不得转载:新起点博客 » 常用的js固定层代码效果,可用于广告,标签,关注,个人信息
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏