请选择 进入手机版 | 继续访问电脑版

巅峰霸主

 找回密码
 立即注册

QQ登录

只需一步,快速开始

JavaScript+css实现导航或某元素上滑至顶端时固定悬浮

[复制链接]

游客只能显示部分内容,请登录后查看帖子完整内容!!!注册完全免费。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
使用js来实现导航或某个元素隋页面滚动,到达顶部位置时自动悬停固定在页面上。
.afix{
position:fixed;
top:45px;
z-index:100;
}
.fix{
position:fixed;
top:0px;
z-index:100;
}

.parent {

background: white;
width: 100%;
border-bottom: 1px solid #FFF;
}

window.onscroll= function(){
//变量t是滚动条滚动时,距离顶部的距离
//var current =document.documentElement.scrollTop;

var currnet = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
var obj = $('.parent')[0];
var hig =$('#source_container').height();
var isAndroid = u.indexOf('Android') > -1|| u.indexOf('Linux') > -1;
var css ='fix';
if(isAndroid){
css = 'afix';
}
if(hig-current<50){
var obj = $('.parent')[0];
$(obj).addClass(css);// ('position','fixed');
}else{
if($(obj).hasClass(css))
{
$(obj).removeClass(css);
}
}

}





<div class="div_body topcss">
<div class="xuanfu">
<div id="source_container">
</div>
<div class="parent">
<div class="sui"><i class="fa fa-user-circle-o" aria-hidden="true"></i><input class="weui-btn_primary weui-input " type="button" value="我也来说两句" id="comment"></div>
</div>
</div>
<div class="container">
@*<div class="comentcss"><a href="#" id="more">查看更多</a></div>//这个功能去掉*@
</div>
</div>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|巅峰霸主 ( 京ICP备12023415号-2 )

声明:本站的任何信息和内容仅代表作者的立场和观点,与巅峰霸主网无关。

禁止在巅峰霸主网发布任何与《中华人民共和国法律》相抵触的言论!

GMT+8, 2019-6-17 09:28 , Processed in 0.054197 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表