JQ：当页面滚动到一定位置之后，让元素固定在顶部，小于位置后恢复原来的位置

项目背景：

一天小虎找到龙哥说，龙哥你有没有现成的JS板子，就是那种当页面滚动到某个位置时，页面中的某个元素则固定在顶部不在滚动，而小于这个位置之后这个元素又恢复到原来的状态。

实现：这里做了一个简单的实现，前提是不要考虑浏览器兼容了，如果你要考虑，就自己解决吧，对一个前端来说这应该不是什么难事。

接下来看源码:

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
.box{height:50px;background:#ccc;width:100%;}
</style>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="box"><div class="info"></div></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script type="text/javascript">
var oInfo = $(".info");
var oTop = $(".box").offset().top;
var sTop = 0;
$(window).scroll(function(){sTop = $(this).scrollTop();
oInfo.text(sTop + '-' + oTop);//这一句 只是为了看看数据 没有多大的用处
if(sTop >= oTop){
$(".box").css({"position":"fixed","top":"0"});
}else{
$(".box").css({"position":"static"});
}
});
</script>

要知道，这里我引入了JQ库，用提百度cdn的库，考虑速度嘛，百度怎么也要强悍一些。现在你只需要拷贝代码到你的HTML文件中就可以运行看到效果了，如果你显示器的分辨率很大，就请在元素的下面再增加一些 br 吧，这样就可以看到效果了。

JQ：当页面滚动到一定位置之后，让元素固定在顶部，小于位置后恢复原来的位置相关推荐

[html] 写一个布局，当页面滚动一定高时，导航始终固定在顶部，反之恢复原位
[html] 写一个布局,当页面滚动一定高时,导航始终固定在顶部,反之恢复原位使用粘性定位,position:sticky 记得使用的时候父元素不能使用overflow:hidden和overflo ...
[html] 写一个布局，当页面滚动一定高时，导航始终固定在顶部，反之恢复原位
[html] 写一个布局,当页面滚动一定高时,导航始终固定在顶部,反之恢复原位使用粘性定位,position:sticky 记得使用的时候父元素不能使用overflow:hidden和overflo ...
基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
jq实现页面滚动thead固定在顶部，仅tbody滚动
jq实现页面滚动thead固定在顶部,仅tbody滚动监听页面滚动 $(window).scroll(function () 获取窗口滚动高度 $(window).scrollTop() 总体思路: ...
jQuery页面滚动动态加载图片等元素
相信大家见过好多随着页面滚动,动态加载图片等元素的网站,我也是,以前见了好多,只是没时间去研究,今天晚上有空,百度了一下找了一个jquery插件,作者张鑫旭,效果挺好,代码也很简单,使用更方便,废话不 ...
Jquery页面滚动条向下拉到div的位置时，此div就固定在顶部，向上拉时返回原位置
Div在网页打开时固定在某个位置(不一定是网页的最顶端),当滚动条向下滚动时,页面的顶部到达此div位置后,此div就固定在网页的最顶部跟随移动,当滚动条向上滚动时,页面顶部高过此div原来的固定位置 ...
页面滚动到某一位置吸顶_vue监听滚动事件某元素吸顶或固定位置显示详解
本文主要为大家详细介绍了vue实现某元素吸顶或固定位置显示,监听滚动事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 最近写了一个VUE的web app项目,需要实现某个部位 ...
滚动页面，实现导航栏固定在顶部（吸顶效果）
内容说明页面中有导航栏,当页面滚动超出一定范围时,它会固定在设置好的位置,一般是固定在顶部. 本文有两种方式实现,一种是sticky,兼容不好:另外一种是sticky的解体..兼容效果万能 1.首先 ...
php页面背景不动,页面滚动背景图片不动的原理及实现
以前看到一种页面滚动条在滚动,而背景图片却不动的效果,页面缓缓的下拉,背景也缓缓的切换,就像放电影一样,后来才知道这叫(Parallax Scrolling),作为一种优雅酷炫的页面展示的方式,视差滚 ...

JQ：当页面滚动到一定位置之后，让元素固定在顶部，小于位置后恢复原来的位置

JQ：当页面滚动到一定位置之后，让元素固定在顶部，小于位置后恢复原来的位置相关推荐

最新文章

热门文章