删除和添加保证金滚动

Question

的CSS

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

我努力做到最好的，当用户向下滚动100像素从文档的顶部，元素.menu的margin-top被删除。

Answer 1

在普通的JavaScript它可能看起来像这样：

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

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

 
body { 
 
    height: 1000px; 
 
    margin: 0; 
 
}

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

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>