滚动后如何在Navbar中创建淡入淡出？

Question

I have a cover photo which, using jscript, stretches the entire window on any resolution. 我有一张封面照片，使用jscript，可以在任何分辨率上拉伸整个窗口。 When you scroll down the cover page goes up and content appears. 向下滚动时，封面会上升并显示内容。 I am trying to have the navbar fade in once the cover photo is completely scrolled up and then keep the navbar static the rest of the page unless you scroll back up to the cover photo which will have the navbar fade back out. 我试图让封面照片完全向上滚动后导航栏淡入，然后保持导航栏静止页面的其余部分，除非您向上滚动到封面照片，导航栏会淡出。 Unfortunately if i make the position of the navbar fixed, it will not show at all. 不幸的是，如果我固定导航栏的位置，它根本不会显示。 Please help. 请帮忙。

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

Answer 1

make the navbar inside the header div, and change the top and left properties to 0 : 在导航栏div中创建导航栏，并将顶部和左侧属性更改为0：

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

} }

Answer 2

here is the exact same effect your are looking for : 这是你正在寻找的完全相同的效果：

Live Demo 现场演示

I've used Jquery and waypoints.js to do so easily : 我已经使用Jquery和waypoints.js轻松完成了这样做：

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

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

make sure to add these two libs after Jquery : 确保在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>

滚动后如何在Navbar中创建淡入淡出？

问题描述

2 个解决方案

解决方案1
0 2015-02-27 17:37:11

解决方案2
0 2015-02-27 17:38:31

滚动后如何在Navbar中创建淡入淡出？

问题描述

2 个解决方案

解决方案1 0 2015-02-27 17:37:11

解决方案2 0 2015-02-27 17:38:31

解决方案1
0 2015-02-27 17:37:11

解决方案2
0 2015-02-27 17:38:31