如何在用户滚动到特定块时淡出某些元素？

Question

我有一个功能，淡出某些元素，当用户来到网页的末尾，没有我需要一个函数，当到达一些特定的类的HTML块（'。s-footer'）将淡出元素。

function hideMenu() { 
 
    var mainMenu = $('.main-head'); 
 
    if ($(document).scrollTop() == $(document).height() - $(window).height()) { 
 
     mainMenu.fadeOut(); 
 
    } 
 
    else { 
 
     mainMenu.fadeIn(); 
 
    } 
 
    } 
 
    $(window).scroll(hideMenu);

Answer 1

试试这个

function sticky_relocate() { 
 

 
    var window_top = jQuery(this).scrollTop(); 
 
    var div_top = jQuery('#reachdiv').offset().top; 
 
    var footer_top = jQuery('.footer-container').offset().top; 
 

 
    if (window_top > div_top) { 
 
     jQuery('#fixed-toolbar').addClass('fixed'); 
 
    } else { 
 
     jQuery('#fixed-toolbar').removeClass('fixed'); 
 
    } 
 

 
    if (window_top > footer_top) { 
 
     jQuery('#fixed-toolbar').removeClass('fixed'); 
 
    } 
 

 
} 
 

 
jQuery(function() { 
 
    jQuery(window).scroll(sticky_relocate); 
 
    sticky_relocate(); 
 
});

.fixed { 
 
    width:921px; 
 
    position:fixed; 
 
    top:0; 
 
    background:red; 
 
    color:#FFF; 
 
    z-index:9999!important; 
 
    margin:0 auto!important; 
 
    border-bottom:1px solid #ccc; 
 
    height:80px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="anchor"> 
 
    <div id="fixed-toolbar">This is a test</div> 
 
</div> 
 
<div>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br><div style="color:red;" id="reachdiv"> 
 
     When scroll Here , Fixed Menu 
 
    </div> 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br>Static text blocks 
 
    <br> 
 
</div> 
 
<div class="footer-container">This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br>This is the footer 
 
    <br> 
 
</div>

Answer 2

您可以使用控制台日志浏览器对scrollTop手动检查您的特定块的滚动顶部位置（）函数，当你获得所需的位置后，你可以使用if-else s触发淡出效果。

，你可以在这里看到我的代码：`

window.onload = function(){ 
$(document).ready(function(){ 
    $(window).scroll(function(){ 

    console.log($(this).scrollTop()); /*use this to check the position of the block you want to trigger the fade. */ 
    var top = $(this).scrollTop(); 
    if(top == 600){  //here i got the number 600 by scrolling/click to 
         // scroll to that part of the web page with id 


     //you can set your fade effect here 
    } 

});}}