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

巅峰霸主

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[复制链接] [添加相关主题]
烈火大地 发表于 2019-6-10 16:40:22 | 显示全部楼层 |阅读模式
使用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>


上一篇:JavaScript简单计算人的年龄示例
下一篇:在线客服弹点击弹出新窗口代码
回复

使用道具 举报

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

本版积分规则

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

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

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

GMT+8, 2020-2-22 15:11 , Processed in 0.091719 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

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