刪除和添加保證金滾動

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>