hide the div when scroll down the remaining 100px

Question

I want to hide my div , when scrolling down the remaining 100px. If you have any answer please help me

 $(document).scroll(function() { var y = $(this).scrollTop(); if (y > 2300) { $('.bottomMenu').show(); } else if { ? } else { $('.bottomMenu').hide(); } }); 

 .bottomMenu { display: none; position: fixed; top: 10%; width: 100%; height: 60px; border-top: 1px solid #000; background: red; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bottomMenu" style="background:red; height:100px;width:100px;">ikanbakar</div> 

Answer 1

This should be the code. you should add a class in css as

bottomMenu.active{}

to define your styles there.

$(window).on("scroll", function() {
    if($(window).scrollTop() > 2300) {
        $(".bottomMenu").addClass("active");
    } else {
       $(".bottomMenu").removeClass("active");
    }
});

Answer 2

well if you want this here is the example hope it can help you

 $(window).on("scroll", function() { if($(window).scrollTop() < 300) { //you have to change the value according to your content $(".bottomMenu").addClass("game"); } else { $(".bottomMenu").removeClass("game"); } }); 

 .bottomMenu{display:none;} .game { display:block; position: fixed; top: 10%; width: 100%; height: 60px; border-top: 1px solid #000; background: red;} .nav { font-weight: normal; list-style: none; text-align: center; width: 100%; top: 0; padding: 20px 0 20px 0; background-color: #4F4F4F; } .nav li { display: inline-block; padding: 0 25px 0 25px; } .nav li a { text-decoration: none; color: #ffffff; } .nav li a:hover { color: #c1c1c1; } .footer { float:left; list-style: none; text-align: center; position:relative; width: 100%; bottom: 0; padding: 20px 0 20px 0; } .footer li { display: inline-block; padding: 0 25px 0 25px; font-weight: lighter; } .footer li a { text-decoration: none; color: #ffffff; } header { display: inline-block; width: 100%; } .footer { background: #333; } body{ margin:0px auto;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <ul class="nav"> <li><a href="index.html">HOME</a></li> <li><a href="projects.html">PROJECTS</a></li> <li><a href="about.html">ABOUT</a></li> </ul> </header> <section style="float:left;width:100%;"> <p> Ensure growth and profitability by extending our product portfolio in other categories of HPC business in domestic and international markets. Continuously improve our system and products to enhance customer satisfaction. Continue with our commitment to operate business in an ethical manner. Develop & motivate ZIL people to build a high performance culture. Deliver high quality branded and innovative products and services to ensure customer satisfaction. Simplify business processes and reduce complexity to achieve business growth. Optimize resources to ensure competitiveness. Ensure regulatory and statutory compliance and embed best practices of corporate governance.</p> <div class="bottomMenu game" style="background:red; height:100px;width:100px;">ikanbakar</div> <p> Ensure growth and profitability by extending our product portfolio in other categories of HPC business in domestic and international markets. Continuously improve our system and products to enhance customer satisfaction. Continue with our commitment to operate business in an ethical manner. Develop & motivate ZIL people to build a high performance culture. Deliver high quality branded and innovative products and services to ensure customer satisfaction. Simplify business processes and reduce complexity to achieve business growth. Optimize resources to ensure competitiveness. Ensure regulatory and statutory compliance and embed best practices of corporate governance.</p> </section> <footer> <ul class="footer"> <li><a href="https://steamcommunity.com/id/wow">Made by Lumo © 2017</a> </li> </ul> </footer> 

Answer 3

can you try this ?

$(document).scroll(function () {
    if(($(document).height() - $(document).scrollTop()) > 100 ) {
       $('.bottomMenu').show();
    } else {
       $('.bottomMenu').hide();
    }
});

or javascript way like

document.documentElement.scrollHeight - document.documentElement.scrollTop