Ich habe versucht, ein Element beim Scrollen anzuzeigen, wenn es sich im Ansichtsfenster befindet, und wenn nein, es erneut auszublenden. Aber egal was ich versuche, ich kann es nicht zum Laufen bringen.
Dies ist, was ich bisher habe, aber die Funktion wird nur einmal ausgeführt, wenn die Seite geladen wird und nicht, wenn sie gescrollt wird, sodass der Wert nicht aktualisiert wird.
$(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>
3 Antworten
In reinem Javascript können Sie so etwas tun, das viel weniger Ressourcen verbraucht als ein vollständiger jQuery-Ansatz:
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>Hier ist ein Ausschnitt mit der Opazitätsänderung:
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>Und hier ist ein Ausschnitt, der Ihnen zeigt, wie Sie definieren, wo im Ansichtsfenster es ausgelöst wird. Ich habe gerade die Werte innerHeight und 0 in object geändert, in denen Sie die Anzahl der Pixel von oben definieren es sollte sein und die Anzahl der Pixel von unten. Vergessen Sie nicht, auch einen Ereignis-Listener für resize hinzuzufügen, da sich diese pixelbasierten Werte ändern, wenn sich Ihr Ansichtsfenster ändert. Daher müsste Ihr myViewport -Objekt entsprechend aktualisiert werden:
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>Ich habe versucht, Ihr Problem nur durch Ihren Code zu lösen. Es funktioniert jetzt gut für mich. Bitte versuchen Sie dies und lassen Sie es mich wissen. Öffnen Sie auch Ihre Browserkonsole, um festzustellen, ob ein js-Fehler vorliegt.
$(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').fadeIn(1000);
console.log('if cond');
} else {
$('#cont_quote blockquote').fadeOut(1000);
console.log('else cond');
}
});
Versuchen Sie es mit:
$(window).on('scroll mousewheel', function() {
Und umgeben Sie Ihre Funktion mit:
$(document).ready(function(){
});