Question

的CSS

.menu {
   margin-top: 100px;
   width: 100%;
   height: 25px;
   position: fixed;
}

我正在尝试制作它，当用户从文档顶部向下滚动100px时，元素margin-top的{{1}}将被删除。

Answer 1

在纯JavaScript中，它可能如下所示：

＆＃13;

window.addEventListener('scroll', function() {
  document.querySelector('.menu').style.marginTop =
    Math.max(0, 100 - this.scrollY) + 'px';
}, false);

＆＃13;

.menu {
  margin-top: 100px;
  width: 100%;
  height: 25px;
  position: fixed;
  border: 1px dotted;
}

body {
  height: 1000px;
  margin: 0;
}

＆＃13;

<div class="menu"></div>

＆＃13;

Answer 2

好。在提出这类问题时，您应该包括您尝试过的解决方案。不仅仅是让我们为您制作代码。但是......我今天感到很慈善，所以这里有解决方案：

$(window).scroll(function(){
   if($(window).scrollTop()>100){
   
   $(".menu").css({"margin-top":"0"})
   }else{
   $(".menu").css({"margin-top":"100px"})
   }
});

.menu {
margin-top: 100px;
width: 100%;
height: 25px;
position: fixed;
background:red;
transition:0.5s;
}
body {
  height:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
</div>

根据滚动的金额删除并添加保证金

2 个答案: