代码：\x0d\•$(function(){\x0d\\x0d\•//获取要定位元素距离浏览器顶部的距离\x0d\\x0d\•var navH = $("nav")offset()top;\x0d\\x0d\•//滚动条事件\x0d\\x0d\•$(window)scroll(function(){\x0d\\x0d\•//获取滚动条的滑动距离\x0d\\x0d\•var scroH = $(this)scrollTop();\x0d\\x0d\•//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定\x0d\\x0d\•if(scroH>=navH){\x0d\\x0d\•$("nav")css({"position":"fixed","top":0});\x0d\\x0d\•}else if(scroH回答于 2022-11-16
//html
<body>
<div style="background:#003366;height:500px;">空div</div>
<div class="purple" style="height:500px;width:200px;background:purple">
<div class="nb" style="height:100px;width:100px;background:#9966FF">移动到顶部固定不变</div>
</div>
<div class="red" style="background:#ff0000;height:1500px;">空div</div>
<div style="background:#ccc;height:1500px;">空div</div>
<div class="nb2" style="height:100px;width:100px;background:gray;">移动到底部固定不变</div>
</body>
//js
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $("nb")offset()top;
var navH2 = $("nb2")offset()top;
var Pur= $("purple")offset()top; //紫色块
var Red= $("red")offset()top; //红色块
//滚动条事件
$(window)scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this)scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
if(scroH>=navH){
$("nb")css({"position":"fixed","top":0});
}else if(scroH<navH){
$("nb")css({"position":"static"});
}
if(scroH <= navH2){
$("nb2")css({"position":"fixed","bottom":"15px","right":"15px"});
}else if(scroH<navH){
$("nb2")css({"position":"static"});
}
if(scroH >= Pur && scroH <= Red){
$("nb")css({"position":"static"}); //在紫色块的时候不固定
$("nb2")css({"position":"static"}); //在紫色块的时候不固定
}
})
})
以上就是关于使用js或jq控制一个div，当滚动到页面顶部的时候固定在顶部，离开可继续滚动吗全部的内容，包括:使用js或jq控制一个div，当滚动到页面顶部的时候固定在顶部，离开可继续滚动吗、js 网页代码 div随滚动条 移动到浏览器顶部 固定的问题、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）