向下滾動其余100px時隱藏div

Question

向下滾動其余100px時，我想隱藏div 。 如果您有任何答復，請幫助我

 $(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

這應該是代碼。 您應該在CSS中添加一個類作為

bottomMenu.active {}

在那里定義您的樣式。

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

Answer 2

好吧，如果您想要此示例，希望它可以為您提供幫助

 $(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

你可以試試嗎？

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

或javascript方式

document.documentElement.scrollHeight - document.documentElement.scrollTop