Question

我希望导航向下滚动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");
    }
};

Answer 1

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

滚动顶部淡出时的Javascript窗口

1 个答案: