追加またはここに固定分裂

Question

<div class="contact-details" id="contact-details"> 
    <ul> 
     <li class="call"><a href="#"><span>+49 (6131) 143 83 25</span></a></li> 
     <li class="email"><a href="#"><span>+49 (6131) 143 83 25</span></a></li> 
     <li class="skype"><a href="#"><span>+49 (6131) 143 83 25</span></a></li> 
     <li class="run"><a href="#"><span>+49 (6131) 143 83 25</span></a></li> 
    </ul> 
</div> 

スクリプト

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    windowHeight = $(window).innerHeight(); 

    if (scroll > windowHeight) { 
     $('.contact-details ul li').addClass('active'); 
     alert("hello"); 
    } else { 
     $('.contact-details ul li').removeClass('active'); 
    } 
}); 

内の特定のセクションを介してユーザのスクロールは、私がしたいときに、リスト項目にクラスを削除すると、それが固定されているように、ページを介して固定分割スクロール。リスト内のアイテムがバナーをスクロールするとき、リストアイテムにクラスを追加し、バナーセクションにスクロールバックするときにクラスを削除する必要があります。私はあなたのバナーがあなたのページの上部にあると仮定

Answer 1

...

あなたは比較何を見ています。
スクロールした量をウィンドウのinnerHeightと比較すると、大きくスクロールしてからtrueにする必要があります。

通常、ウィンドウのinnerHeightは、パディング/マージンよりも大きくなります。

スクロールされた量と、衝突する要素の位置から、渡される固定要素のouterHeightを差し引いた値を比較することをお勧めします。

$(window).scroll(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    //windowHeight = $(window).innerHeight(); 
 
    var bannerHeight = $("#banner").outerHeight(); 
 

 
    
 
    $('.contact-details ul li').each(function(){ 
 
    if (scroll > $(this).offset().top - bannerHeight) { 
 
     $(this).addClass('active'); 
 
     //console.log("hello"); 
 
    } 
 
    else 
 
    { 
 
     $(this).removeClass('active'); 
 
    } 
 
    }); 
 
});

.contact-details{ 
 
    height:2000px; 
 
    padding-top:100px; 
 
} 
 
#banner{ 
 
    height:70px; 
 
    width:100%; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    border:1px solid red; 
 
    padding:12px; 
 
} 
 
.active{ 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="banner">Banner</div> 
 

 
<div class="contact-details" id="contact-details"> 
 
    <ul> 
 
     <li class="call"> 
 
     <a href="#"> 
 
      <span>+49 (6131) 143 83 25</span> 
 
     </a> 
 
     </li> 
 
     <li class="email"> 
 
     <a href="#"> 
 
      <span>+49 (6131) 143 83 25</span> 
 
     </a> 
 
     </li> 
 
     <li class="skype"> 
 
     <a href="#"> 
 
      <span>+49 (6131) 143 83 25</span> 
 
     </a> 
 
     </li> 
 
     <li class="run"> 
 
     <a href="#"> 
 
      <span>+49 (6131) 143 83 25</span> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
</div>