How to fade out some element when user scrolles to a specific block?

Question

I have a function that fades out some element when user comes to the end of a web page, no i need a function that will fade out an element when reaching some html block with a specific class('.s-footer').

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

score 0 · Answer 1 · answered May 06 '17 at 12:26

Try this

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>

score 0 · Answer 2 · 2017-05-06T16:03:52.297

You can manually check for the scroll top position of your specific block by using console log for the scrollTop() function, after you get the desired position you can just use an if-else section to trigger the fadeout effects.

you can see my code here:`

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 
    }

});}}

How to fade out some element when user scrolles to a specific block?

2 Answers2