我希望导航在向下滚动200px后淡出，当用户向上滚动时它应该会淡出。这就是我目前所拥有的：
$(window).scroll() {
if ($(document).scrollTop() > 200) {
$("#nav-wrapper .small-12.columns").fadeOut();
console.log("fade out at 200");
} else {
$(".nav-wrapper .small-12.columns").fadeIn().css({'background': '#333333','padding': '10px 10px 10px 0'});
console.log("fade in on scroll up");
}
};
<!DOCTYPE html>
<html>
<head>
<style>
body {height:1500px;}
</style>
</head>
<body>
<div class="nav-wrapper" id="nav-wrapper" style="text-align: center;">
Example FadeIn and FadeOut on scroll
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop>200) {
$("#nav-wrapper").fadeOut();
//console.log("fade out at 200");
} else {
$(".nav-wrapper").fadeIn().css({'background': 'red','padding': '10px 10px 10px 0','margin-top': '200px'});
//console.log("fade in on scroll up");
}
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>