2017-06-19 8 views
0

まず、私の質問を読んでいただきありがとうございます。私は、これがjQuery/JavaScriptをよく知っている人にとっては、私にとってはとても簡単な質問だと思っています。jQueryスクリプトにオフセットを追加してください

私は、divがビューポート全体を表示しているときにコンテンツを表示するウェブページを持っています。しかし、私にとっては、これは混乱しています。今のところ、私は遅れていると思う。

私は、コードのこの部分を使用:あなたはインクルードは、下に比較的近い表示されたときにsが表示されているcodepen div」で見ることができるように

$(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); 

      } 

     }); 

    }); 

}); 

ワーキングcodepenはここlink

見つけることができます画面のこれは私が望むものですが、現時点ではビューポートの中央におそらく私のdivが表示されます。

これをに追加するといくつかのオフセットが追加されましたが、期待通りに構文エラーが発生しました。

ここ

は、HTMLとCSS(空想に何も)である:divはちょうどビューにあるときに

<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;} 

、本当の問題は、今私は(一番下)コンテンツをフェードインしますされていませんそれがすでに中央の視点にあるとき。助けてくれてありがとう。

+1

あなた 'div'を示し' bottom_of_window> bottom_of_object'でなければなりません。 (top_of_object)を 'top_of_object'のように' var top_of_object = $(this)).position()。top; 'と' if(bottom_of_window> top_of_object){... 'のように置き換えます。 –

+0

あなたの要素は常に画面の一番上にあり、そのため、コースをスクロールするとすぐに、オブジェクトの下部がウィンドウの下部よりも大きくなります。ウィンドウの下に押し下げると、[CodePen](https://codepen.io/anon/pen/ZyeOaG)のように消えてしまいます。 – George

+0

@AlexeyG優れています。それはそれをした!ありがとう! –

答えて

0

コードに入力ミスがあります。

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

関連する問題