当用户滚动到特定块时如何淡出某些元素？ [复制]

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 部分来触发淡出效果。

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

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 
    }

});}}