如何编码悬停导航栏才会在开始滚动时出现 [英] How To Code A Hovering Navigation Bar To Appear Only When You Start Scrolling

问题描述

我希望当阅读者/网络访问者滚动通过博客标题时显示悬停/粘滞导航栏，而不是像目前一​​样随时出现导航栏。我并不完全确定如何实现这种影响，因为我已经对此进行了研究但无济于事，但我确信它完全可行。我在两个博客上看到了这种效果，其中一个托管在Blogger上，这些站点的URL如下所示： http： //www.theweekendattic.com/ 和 http://mediamarmalade.com/ 。我自己博客的URL如下： http://www.blankesque.com

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

我的网站上悬停的导航栏的CSS和HTML代码如下：

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>

推荐答案

您可以使用jQuery fadein / fadeout 滚动事件：

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();
            }
        });
    });
});

这篇关于如何编码悬停导航栏才会在开始滚动时出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！