如何在滚动后创建淡入导航栏

How to created Fading In Navbar after scroll?

本文关键字：淡入 导航 创建 滚动      更新时间：2024-06-18

我有一张封面照片，使用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>

将导航栏设置在标题div中，并将顶部和左侧属性更改为0:

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

}

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

实时演示

我使用了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>
相关文章：