向下滚动剩余的100px时隐藏div

Question

当我向下滚动剩余的100px时，我想要隐藏我的 div 。 如果您有任何答案，请帮助我

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这应该是代码。你应该在css中添加一个类

  

bottomMenu.active {}

在那里定义你的风格。

UnityPlayerActivity

Answer 2

如果你想要这个，那么这个例子希望它可以帮到你

＆＃13;

＆＃13;

$(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");
    }
});

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

你能试试吗？

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

或javascript方式

document.documentElement.scrollHeight - document.documentElement.scrollTop