How To Code A Hovering Navigation Bar To Appear Only When You Start Scrolling

问题

I would like to have my hovering/sticky navigation bar appear when a reader/web visitor has scrolled passed the blog header, instead of the navigation bar appearing at all times, as it currently does. I'm not entirely sure how to achieve this affect as I have done research on this but to no avail, but I am certain it is completely doable. I have seen this effect on two blogs, one of which is hosted on Blogger, the URL of these sites are as follows : http://www.theweekendattic.com/ and http://mediamarmalade.com/. The URL to my own blog is as follows : http://www.blankesque.com

The CSS and HTML coding for the hovering navigation bar currently on my site is detailed below :

#wctopdropcont{
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position: fixed;

background:#f5f5f5;
border-bottom: 1px solid #f0f0f0;
  }

#wctopdropnav{ 
float: left;
width:97%;
height:7px;
display:block;
padding:0px;
}

#wctopdropnav li{
float:left;
list-style:none;
line-height:13px;
padding: 10px 6.5px 6.5px 6.5px;
background:#f5f5f5;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#494949;
float: left;
display:block;
text-transform: uppercase;
font-size: 10.5px!important;
font-family: karla, arial!important;
padding: 5px;
text-decoration:none;
font-weight: normal!important;
letter-spacing : 0.09em;
}

#wctopdropnav li:first-child a {
font-weight: bold!important;
margin-left: 20px;
  }

#wctopdropnav li a:hover, #wctopdropnav li a:active,   #wctopdropnav .current_page_item a  {
 color: #a6a6a6;
font-weight: normal;
padding: 5px;
background: #f5f5f5;  
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 10.5px;
background:#f5f5f5;
color: #494949;
width: 90px;
margin: 0px;
padding: 0;
line-height: 15px;
position: relative;
}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: #a6a6a6;
background: #f5f5f5;
filter: #f5f5f5;
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}   
#socialmediabuttons { 
display: block; 
float: right;  
position: relative;
margin: 0.9% -1% 0 0;
} 
#socialmediabuttons a {  
padding: 0 0 0 18px;
} 
#socialmediabuttons a:hover { 
opacity: 0.4; 
filter: alpha(opacity=40); 
 } 
</style>
<div id='wctopdropcont'>
 <div id='wctopdropnav'>

   <li><a href='http://www.blankesque.com'>Home</a></li>
              <li><a href='http://www.blankesque.com/search/label/Advice'>Advice</a></li>
              <li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
           <li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
              <li><a href='http://www.blankesque.com/search/label/Lifestyle'>Lifestyle</a></li>
           <li><a href='http://www.blankesque.com/search/label/Skin &amp; Hair'>Skin &amp; Hair</a></li>

<div id='socialmediabuttons'>  


<a href='https://www.pinterest.com/blankesque' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/91F98FB1-242C-428E-A472-50F7D511C38E_zpsaiuhz6yb.gif' width='20px'/> 
</a> 


<a href='https://www.twitter.com/' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/923FF7F8-5AA7-4676-935F-2CB5FF465122_zpsmctqg100.gif' width='20px'/></a> 
<a href='http://www.bloglovin.com/blogs/blankesque-14431777' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/7CC1080E-1911-4D0B-B99F-55109C044D54_zps2ky5dfgt.gif' width='20px'/></a> 


<a href='https://instagram.com/' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/C6567CDB-FB01-4F2D-A2FD-D0D875A30B80_zps5mgdqong.gif' width='20px'/></a> 

   </div>

  </div></div>

回答1:

You can use jQuery fadein/fadeout in scroll event:

 $(document).ready(function(){
    $(".navbar").hide();
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('.navbar').fadeIn();
            } else {
                $('.navbar').fadeOut();
            }
        });
    });
});

来源：https://stackoverflow.com/questions/34687237/how-to-code-a-hovering-navigation-bar-to-appear-only-when-you-start-scrolling