我一直在尝试在滚动时显示一个元素，当它位于视口(viewport)中时，如果没有，则再次隐藏它。但无论我如何尝试，我都无法使其发挥作用。
这是我到目前为止所拥有的，但该函数仅在页面加载时运行一次，而不是在滚动时运行，因此它不会更新值。
$(window).scroll(function() {
var top_of_element = $("#cont_quote blockquote").offset().top;
var bottom_of_element = $("#cont_quote blockquote").offset().top + $("#cont_quote blockquote").outerHeight();
var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
var top_of_screen = $(window).scrollTop();
if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$('#cont_quote blockquote').animate({'opacity':'1'},1000);
}
else {
$('#cont_quote blockquote').animate({'opacity':'0'},1000);
}
});
<section id="cont_quote">
<article class="cont_q">
<blockquote>Lorem ipsum</blockquote>
</article>
</section>
最佳答案
在纯 javascript 中，您可以执行类似的操作，这比完整的 jQuery 方法使用的资源要少得多:
function inViewport( element ){
// Get the elements position relative to the viewport
var bb = element.getBoundingClientRect();
// Check if the element is outside the viewport
// Then invert the returned value because you want to know the opposite
return !(bb.top > innerHeight || bb.bottom < 0);
}
var myElement = document.querySelector( 'div' );
// Listen for the scroll event
document.addEventListener( 'scroll', event => {
// Check the viewport status
if( inViewport( myElement ) ){
myElement.style.background = 'red';
} else {
myElement.style.background = '';
}
})body {
height: 400vh;
}
div {
width: 50vw;
height: 50vh;
position: absolute;
top: 125vh;
left: 25vw;
transition: background 4s;
border: 1px solid red;
}<p>Scroll Down</p>
<div></div>这是不透明度更改的片段:
function inViewport( element ){
// Get the elements position relative to the viewport
var bb = element.getBoundingClientRect();
// Check if the element is outside the viewport
// Then invert the returned value because you want to know the opposite
return !(bb.top > innerHeight || bb.bottom < 0);
}
var myElement = document.querySelector( 'div' );
// Listen for the scroll event
document.addEventListener( 'scroll', event => {
// Check the viewport status
if( inViewport( myElement ) ){
myElement.style.opacity = 1;
} else {
myElement.style.opacity = '';
}
})body {
height: 400vh;
}
div {
width: 50vw;
height: 50vh;
position: absolute;
top: 125vh;
left: 25vw;
transition: opacity 1s;
opacity: .2;
background: blue;
}<p>Scroll Down</p>
<div></div>这里是一个片段，向您展示如何定义它在视口(viewport)中触发的位置，我刚刚将 innerHeight 和 0 值更改为 object code> 您可以在其中定义距顶部的像素数和距底部的像素数。不要忘记为 resize 添加事件监听器，因为如果您的视口(viewport)发生变化，这些基于像素的值也会发生变化，因此您的 myViewport 对象需要相应更新:
function inViewport( element, viewport = { top: 0, bottom: innerHeight } ){
// Get the elements position relative to the viewport
var bb = element.getBoundingClientRect();
// Check if the element is outside the viewport
// Then invert the returned value because you want to know the opposite
return !(bb.top > viewport.bottom || bb.bottom < viewport.top);
}
var myViewport = { top: innerHeight * .4, bottom: innerHeight * .6 };
var myElement = document.querySelector( 'div' );
// Listen for the scroll event
document.addEventListener( 'scroll', event => {
// Check the viewport status
if( inViewport( myElement, myViewport ) ){
myElement.style.opacity = 1;
} else {
myElement.style.opacity = '';
}
})
window.addEventListener( 'resize', event => {
// Update your viewport values
myViewport.top = innerHeight * .4;
myViewport.bottom = innerHeight * .6;
})body {
height: 400vh;
}
div {
width: 50vw;
height: 50vh;
position: absolute;
top: 125vh;
left: 25vw;
transition: opacity 1s;
opacity: .2;
background: blue;
}<p>Scroll Down</p>
<div></div>关于javascript - 在滚动视口(viewport)中显示元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49916259/