元素的顶部与父元素的顶部（实际的顶部，不是滚动后的顶部）的距离是 offsetTop，而父元素滚动后的顶部与实际顶部的距离是 scrollTop，所以只要 元素offsetTop-父元素scrollTop，就是元素与父元素滚动后实际可见的那个顶部的距离
楼主我帮你实现了下，直接把代码复制新建一个html网页，然后点“开始阅读”按钮，看是不是你想要的，想中止，就点“停止”，另：当滚动到底部后，会自动停止。
<!DOCTYPE html><html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
article{
width: 390px;
height:390px;
overflow-y:auto ;
border: 1px solid #666;
}
</style>
</head>
<body>
<div class="article">
粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜。
</div>
<button onclick='begin()'>开始阅读</button>
<button onclick='stop()'>停止</button>
</body>
<script>
(function($){
var timer;
windowbegin=function(){
timer=setInterval(function(){
var el=$("article");
var lastScrollTop=elscrollTop;
elscrollTop+=100;
if(lastScrollTop==elscrollTop){
clearInterval(timer);
}
},1000)
};
windowstop=function(){
if(timer){
clearInterval(timer);
}
}
})(function(selector){
return documentquerySelector(selector);
});
</script>
</html>
windowonload=function(){
waterfall();
windowonscroll=function(){
var parent=documentgetElementById("main");
var boxs=getByClass(parent,"box");
var scrollH=documentdocumentElementscrollTop||documentbodyscrollTop;
var documentH=scrollH+documentdocumentElementclientHeight;
var lastH=boxs[boxslength-1]offsetTop+Mathfloor(boxs[boxslength-1]offsetHeight/2);
/763/
if(lastH-350<documentH){ //这里的lastH不减掉350，就无法进入if语句？？？
/465/
dataInt={"data":[{"src":"1jpg"},{"src":"2jpg"},{"src":"3jpg"},{"src":"7jpg"},{"src":"4jpg"},{"src":"5jpg"},{"src":"6jpg"}]};
for(var i=0;i<dataIntdatalength;i++){
var divB=documentcreateElement("div");
divBclassName="box";
parentappendChild(divB);
var divP=documentcreateElement("div");
divPclassName="pic";
divBappendChild(divP);
myimg=documentcreateElement("img");
myimgsrc="/images/"+dataIntdata[i]src;
divPappendChild(myimg);
}
waterfall();
}
}
}
function waterfall(){
var oParent=documentgetElementById("main");
var boxs=getByClass(oParent,"box");
var boxW=boxs[0]offsetWidth;
var num=Mathfloor(documentdocumentElementclientWidth/boxW);
oParentstylecssText="width:"+boxWnum+"px;margin:0 auto;";
boxHarr=new Array();
for(var i=0;i<boxslength;i++){
if(i<num){
boxHarrpush(boxs[i]offsetHeight);
}else{
var minH=Mathminapply(null,boxHarr);
var minHindex=getminHindex(boxHarr,minH);
boxs[i]styleposition="absolute";
boxs[i]styletop=minH+"px";
boxs[i]styleleft=minHindexboxW+"px";
//boxs[i]styleleft=boxs[minHindex]offsetLeft+"px";
boxHarr[minHindex]=boxHarr[minHindex]+boxs[i]offsetHeight;
}
}
}
function getByClass(parent,clsName){
a=parentgetElementsByTagName('');
var arr=[];
for(var i=0;i<alength;i++){
if(a[i]className==clsName){
arrpush(a[i]);
}
}
return arr;
}
function getminHindex(arr,minH){
for(var i in arr){
if(arr[i]==minH)
return i;
}
}
1、新建html文档。
2、书写hmtl代码<div class="box"> <!--代码开始--><div class="main"></div><div class="sub"><div class="sub01"></div><div class="sub01"></div><div class="fixed">我是固定的哟</div></div><!--代码结束--></div>。
3、书写css代码。<style type="text/css">{padding:0px;margin:0px;}box{width:1000px;
;background:#ccc;margin:0 auto;overflow:hidden;}main{width:770px;height:3000px;。
;background:#000;float:left;}sub{width:220px;background:#FC6;float:right;}。
4、sub01{width:220px;height:100px;background:#0CC;margin-bottom:10px;}fixed
{width:220px;height:300px;background:#F66;font:normal 13px/30px \5FAE\8F6F\96C5\
9ED1;text-align:center;top:10px;}</style>。
5、书写并添加js代码。<script src="js/jqueryjs"></script>。这就完成了。
代码：
•$(function(){
•//获取要定位元素距离浏览器顶部的距离
•var navH = $("nav")offset()top;
•//滚动条事件
•$(window)scroll(function(){
•//获取滚动条的滑动距离
•var scroH = $(this)scrollTop();
•//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
•if(scroH>=navH){
•$("nav")css({"position":"fixed","top":0});
•}else if(scroH<navH){
•$("nav")css({"position":"static"});
•}
•})
•})
jQuery(window)scrollTop({scrollTop:500},500);
或者
jQuery(window)scrollTop()+500px+"px";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html {height:100%}
body {background:linear-gradient(red, blue)}
header {position:fixed; top:0; left:0; right:0}
header login {height:28px; background-color:#fff; text-align:right}
header nav {height:40px; background-color:#ddd; text-align:center}
test {height:2000px}
</style>
</head>
<body>
<header><div class="login">这是login部分</div><div class="nav">这是nav部分</div></header>
<div class="test"></div>
<script>
windowonscroll=function(){
var login=documentgetElementsByClassName("login")[0];
var scrollTop=windowpageYOffset||documentdocumentElementscrollTop||documentbodyscrollTop;
if(scrollTop<10){
loginstyledisplay="block";
}else{
loginstyledisplay="none";
}
}
</script>
</body>
</html>
以上就是关于jquery 怎样获取元素相对父元素的偏移(距离)说明：父元素有滚动条的！全部的内容，包括:jquery 怎样获取元素相对父元素的偏移(距离)说明：父元素有滚动条的！、JQ中怎么做出这种效果 我想做的事每隔1秒自动滚动100px的自动阅读小说的功能，应该再加点什么进去、vue里，我用jq去获取元素的offsettop出现问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）