滚动后如何在导航栏中创建淡入淡出？答案

【问题标题】：How to created Fading In Navbar after scroll?滚动后如何在导航栏中创建淡入淡出？
【发布时间】：2015-02-27 17:03:47
【问题描述】：

我有一张封面照片，它使用 jscript 以任何分辨率拉伸整个窗口。当您向下滚动时，封面会上升并显示内容。我试图让导航栏在封面照片完全向上滚动后淡入，然后在页面的其余部分保持导航栏静态，除非您向上滚动到封面照片，这将使导航栏淡出。不幸的是，如果我固定导航栏的位置，它根本不会显示。请帮忙。

HTML

<body>

<div id="container">

    <div id="header">
    </div>

    <div id="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>

</div>
</body>

CSS

html, body{
    height:100%;
    margin:0;
    background:#F9F9F9;
    /*This is to cut off the white border around the webpage*/
}

#container {
    position: relative;

    max-width: 2048px;
    margin: 0px auto; 
    width: 100%;
    height:100%;
}

#header {
    background: url('../images/cover6.jpg') no-repeat;
    background-size:cover;
    height: 100%;
    margin:0px auto;
    width:100%;
}

#navbar ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

JSS

<script>
   $(window).resize(function() {
   $("#container").height($(window).height());
   });
</script>


<script>
   (function ($) {
     $(document).ready(function(){

       // hide .navbar first
       $("#navbar").hide();

       // fade in .navbar
       $(function () {
         $(window).scroll(function () {
           // set distance user needs to scroll before we fadeIn navbar
           if ($(this).scrollTop() > 1000) {
              $('#navbar').fadeIn();
           } else {
              $('#navbar').fadeOut();
           }
       });


    });

   });
   }(jQuery));
</script>

【问题讨论】：

标签： javascript jquery html css nav

【解决方案1】：

在header div内制作导航栏，并将top和left属性更改为0：

#navbar {
position:static;
margin: 0;
padding: 0;
left:0;
top:0;

}

【讨论】：

【解决方案2】：

这与您正在寻找的效果完全相同：

Live Demo

我使用 Jquery 和 waypoints.js 很容易做到这一点：

$( function() {
            $( "#demo-heading" ).waypoint( function() {
                $( "#demo" ).fadeIn();
            },
            {
                offset: 400
            } );

            $( ".site-header" ).waypoint( 'sticky' );
        } );

确保在 Jquery 之后添加这两个库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/shortcuts/sticky-elements/waypoints-sticky.js"></script>

【讨论】：