jquery scrollto頂部高度問題

Question

我有多個動態內容部分。每個部分都有標題標籤。

First section h2 class name is "bounceInRight" 
First section h2 class name is "bounceInLeft" 
third section h2 class name is "bounceInRight" 
Fourth section h2 class name is "bounceInLeft" and goes on. 

如果我到達這個類，我需要添加一些類到另一個div名稱「眨眼睛」。

爲此，我用下面的代碼：

var eyemoveright = $(".bounceInRight h2").offset().top; 
var eyemoveleft = $(".bounceInLeft h2").offset().top; 
$(window).scroll(function() { 

    if($(window).scrollTop() > eyemoveright) { 

     $('.blink').addClass("move-right"); 
     $('.blink1').addClass("move-right"); 
    } 

    if($(window).scrollTop() > eyemoveleft) { 

     $('.blink').addClass("move-left"); 
     $('.blink1').addClass("move-left"); 
    }        
}); 

請參閱小提琴。

http://jsfiddle.net/zvkjfk6r/

對於前兩個部分工作正常。類正確添加。如果第三個內容塊到達，則添加的類不起作用。因爲我使用了兩個條件。如何再次調用第一個If條件，如果第三個塊的內容達到了？

Answer 1

ü應該通過每個部分使用循環，並設置標誌已經達到了節。像下面

if($(window).scrollTop() < eyemoveright) { 
    $('.blink').removeClass("move-right"); 
    $('.blink1').removeClass("move-right"); 
} 

：

$(window).scroll(function() { 
    $(".bounceInRight h2").each(function(){ 
     var eyemoveright = $(this).offset().top; 
     if($(window).scrollTop() > eyemoveright && !$(this).hasClass('reached')) { 
      console.log('right'); 
      $(this).addClass('reached'); 
      $('.blink').addClass("move-right"); 
      $('.blink1').addClass("move-right"); 
      $('.blink').removeClass("move-left"); 
      $('.blink1').removeClass("move-left"); 
     } 
    }) 

    $(".bounceInLeft h2").each(function(){ 
     var eyemoveleft = $(this).offset().top; 
     if($(window).scrollTop() > eyemoveleft && !$(this).hasClass('reached')) { 
      console.log('left'); 
      $(this).addClass('reached'); 
      $('.blink').addClass("move-left"); 
      $('.blink1').addClass("move-left");   
      $('.blink').removeClass("move-right"); 
      $('.blink1').removeClass("move-right"); 
     } 
    }) 


}); 

http://jsfiddle.net/ashish1bhagat/zvkjfk6r/7/

Answer 2

是否有任何問題的話，如果條件寫第一個 內因爲如果

if($(window).scrollTop() > eyemoveleft) { 

      console.log("seconfif"); 
      $('.blink').addClass("move-left"); 
      $('.blink1').addClass("move-left"); 
     } 

JSFIDDLE

第二種方法

它永遠不會在第二個進入第二

if(eyemoveright< $(window).scrollTop() && $(window).scrollTop() > eyemoveleft) { 

      console.log("seconfif"); 
      $('.blink').addClass("move-left"); 
      $('.blink1').addClass("move-left"); 
     } 

2nd Method JSFIDDLE

After removing class

Answer 3

你應該添加此。

var eyemoveright = $(".bounceInRight h2").offset().top; 
 
    var eyemoveleft = $(".bounceInLeft h2").offset().top; 
 
    $(window).scroll(function() { 
 
    
 
    if($(window).scrollTop() > eyemoveright) { 
 
     
 

 
     $('.blink').addClass("move-right"); 
 
     $('.blink1').addClass("move-right"); 
 
    } 
 

 
    if($(window).scrollTop() < eyemoveright) { 
 
     
 

 
     $('.blink').removeClass("move-right"); 
 
     $('.blink1').removeClass("move-right"); 
 
    } 
 

 
    if($(window).scrollTop() > eyemoveleft) { 
 
     
 
     
 
     $('.blink').addClass("move-left"); 
 
     $('.blink1').addClass("move-left"); 
 
    }    
 
    });

.blink, .blink1{ background-color:#fff; width:3px; height:3px; position:absolute; animation: blink 2s steps(5, start) infinite; -webkit-animation: blink 2s steps(5, start) infinite; left:90px; top:64px; } 
 
    .blink1{ left:124px; top:65px; } 
 
    @keyframes blink { 
 
    to { 
 
     visibility: hidden; 
 
    } 
 
    } 
 
    @-webkit-keyframes blink { 
 
    to { 
 
     visibility: hidden; 
 
    } 
 
    } 
 
    
 
    .blink.move-right{left:50px;} 
 
    .blink1.move-right{left:56px;} 
 

 

 
    .blink.move-left{left:10px;} 
 
    .blink1.move-left{left:15px;} 
 
    .animation-image{ width:200px; height:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="animation-image text-center" style="position:fixed; background-color:red;"><span class="blink1 hidden-mob"></span><span class="blink hidden-mob"></span></div> 
 
<br><br><br><br> 
 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
</p> 
 

 
<div class="clearfix"></div> 
 
<div class="col-sm-5 bounceInRight"> 
 
    <h2>Letraset sheets containing Lorem Ipsum pa</h2> 
 
</div> 
 

 
<div class="clearfix"></div> 
 

 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <div class="col-sm-5 bounceInLeft"> 
 
    <h2>Letraset sheets containing Lorem Ipsum pa</h2> 
 
    </div> 
 

 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <div class="col-sm-5 bounceInRight"> 
 
     <h2>Letraset sheets containing Lorem Ipsum pa</h2> 
 
    </div> 
 

 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <div class="col-sm-5 bounceInRight"> 
 
     <h2>Letraset sheets containing Lorem Ipsum pa</h2> 
 
    </div> 
 

 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <div class="col-sm-5 bounceInRight"> 
 
     <h2>Letraset sheets containing Lorem Ipsum pa</h2> 
 
    </div>