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>
1
Marco 19 Apr. 2018 im 11:28

3 Antworten

Beste Antwort

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>
2
somethinghere 19 Apr. 2018 im 09:39

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');
  }
});
0
Galzor 19 Apr. 2018 im 09:03

Versuchen Sie es mit:

$(window).on('scroll mousewheel', function() {

Und umgeben Sie Ihre Funktion mit:

$(document).ready(function(){
});
0
Robert Bisschop 19 Apr. 2018 im 08:40