Offset zu jQuery-Skript hinzufügen

Zuerst, danke, dass Sie sich die Zeit genommen haben, meine Frage zu lesen. Ich denke, das ist ziemlich die einfache Frage für jemanden, der jQuery/JavaScript besser als ich kenne.Offset zu jQuery-Skript hinzufügen

Ich habe eine Webseite, die Inhalt zeigt, wenn eine div ist in voller Ansicht des Ansichtsfensters. Aber für mich ist das verwirrend. Momentan, denke ich, wird es zu spät eingeblendet.

benutzte ich dieses Stück Code:

$(document).ready(function() { 

    /* Every time the window is scrolled ... */ 
    $(window).scroll(function(){ 

     /* Check the location of each desired element */ 
     $('.hideme').each(function(i){ 

      var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      /* If the object is completely visible in the window, fade it it */ 
      if(bottom_of_window > bottom_of_object){ 

       $(this).animate({'opacity':'1'},1500); 

      } 

     }); 

    }); 

});

Arbeits codepen hier link

Wie Sie sichtbar in den codepen der div ‚s sehen werden kann, wenn die relativ nahe an der Unterseite erscheinen des Bildschirms. Dies ist was ich möchte, aber gerade jetzt meine div 's erscheint, wenn es wahrscheinlich in der Mitte des Ansichtsfensters.

Ich habe versucht, einen Offset zu der $(window).height();, indem Sie dies $(window).height()-900; tun, aber wie erwartet, das gab mir einen Syntaxfehler.

ist die HTML und CSS (nichts Phantasie):

<div id="container"> 
    <article id="content_part_one"> 
     <div class="hideme"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"> 
         <h2>Dit is een faketekst</h2> 
          <p>Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst, die nu nog niet bekend is. De faketekst is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </article> 
</div> 

#content_part_one {min-height:500px;padding-top:90px;margin-bottom:30px;} 
#container{min-height:2000px;} 
.hideme{opacity:0;}

So ist die eigentliche Frage, tun jetzt FadeIn ich den Inhalt, wenn die div gerade in Sicht (unten) und nicht wenn es schon in der Mitte ist. Danke für die Hilfe.

Quelle

2017-06-19 Jay-oh

Ihre 'div' zeigt, wenn' bottom_of_window> bottom_of_object' sein. Ersetzen Sie 'bottom_of_object' auf' top_of_object' wie 'var top_of_object = $ (this) .position(). Top;' und 'if (bottom_of_window> top_of_object) {...' –

Ihr Element ist immer oben auf dem Bildschirm, Sobald Sie also scrollen, ist der untere Teil Ihres Objekts größer als der untere Teil des Fensters. Wenn Sie es unter das Fenster drücken, wird es wie gewünscht eingeblendet [CodePen] (https://codepen.io/anon/pen/ZyeOaG). – George

@AlexeyG Ausgezeichnet. Das hat es geschafft! Vielen Dank! –

Sie haben einen Tippfehler in Ihrem Code.

$(window.height() sollte $(window).height()

Quelle

2017-06-19 09:28:02

Offset zu jQuery-Skript hinzufügen

Antwort

Verwandte Themen