有没有办法通过媒体查询来检测垂直滚动距离?
似乎媒体查询是围绕检测媒体而设计的(令人震惊的是:P),所以浏览器高度之类的东西是可测试的,但并不是特定的页面向下滚动了多远。
如果是不可能的,但你知道一个方法在JS (不是jQuery)请随意张贴!
发布于 2014-05-16 08:38:42
首先,公认的答案不起作用。
正确的名字是
window.onscroll
而不是
window.onScroll
https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll
其次,这是非常低效的,因为函数被调用的次数远远超过了它所需的次数,并且在滚动时会使页面变得迟钝。来自John Resig:
http://ejohn.org/blog/learning-from-twitter/
使用每隔150毫秒运行一次的计时器要好得多--例如:
var scrolled = false;
window.onscroll = function() {
scrolled = true;
}
setInterval(function(){
if (scrolled) {
scrolled = false;
// scrollFunction()
}
}, 150);
发布于 2015-03-12 16:59:24
在Jquery中,您有.scrollTop()方法
http://api.jquery.com/scrolltop/
此示例使用窗口滚动创建div滚动。
$(window).scroll(function(){
$("div").css("margin-top", $(window).scrollTop())
});
发布于 2020-12-08 06:52:01
这里有一种解决方法。f https://jsfiddle.net/oravckzx/1/
$(window).scroll(function(){
$('.post-sidebar').each(function(){
var ScrollTopVar = $(window).scrollTop();
var OffsetTopVar = $(this).offset().top;
var OuterHeightVar = $(this).outerHeight();
var PositionVar = OffsetTopVar-(OuterHeightVar*1.1);
if (ScrollTopVar >= PositionVar) {
$('.hide') .css('background','green').css('font-size','12px')
$('.post-sidebar') .css('background','orange').css('font-size','12px')
$('.hide') .css('background','green').css('font-size','12px')
$('.post-sidebar') .css('background','gray').css('font-size','12px')
document.getElementById("demo3").innerHTML = ScrollTopVar;
document.getElementById("demo2").innerHTML = PositionVar;
}else {
$('.hide') .css('background','yellow').css('background','yellow')
$('.hide') .css('background','yellow')
$('.hide') .css('background','yellow')
document.getElementById("demo").innerHTML = ScrollTopVar;
document.getElementById("demo12").innerHTML = ScrollTopVar;
document.getElementById("demo13").innerHTML = ScrollTopVar;
document.getElementById("demo14").innerHTML = ScrollTopVar;
document.getElementById("demo2").innerHTML = PositionVar;
}
});
});
.red {height:100px;
background:red;margin-bottom:20px;}
.hide {height:50px;background:blue;margin-bottom:20px;}
.post-sidebar {
height:50px;
background:yellow;
margin-bottom:20px;
box-sizing: border-box;
display: block;
font: normal 700 34px Lato, sans-serif;
padding-right: 20px;
width: 452px;
}
.p {
font: normal 700 14px Lato, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="red"><p id="demo"></div>
<div class="red"></div><p id="demo12">ok
<div class="red"><p id="demo13">ok</div>
<div class="post-sidebar"><p id="demo2"></p><p>lizard</p></div>
<div class="hide"><p id="demo2">If reaches to chosen class in html, saves value of ScrollTopVar (as distance from top) to separate variable as eventually PositionVar (which is the distance from top to the chosen class in html, - and that specific distance depends of device which is doing it), and then does certain action if ScrollTopVar value matches or exceeds PositionVar value. Else sets it back if needed, if not including Else it remains as it once met the value. <p id="demo3"></div>
<div class="red"><p id="demo14">ok</div>
<div class="red"><p id="demo"></div>
<div class="red"><p id="demo"></div>
https://stackoverflow.com/questions/16922731
复制相似问题