Question

我希望当阅读器滚动浏览博客标题时，我的悬停导航栏会出现，而不是像目前那样随时出现导航栏。我不完全确定如何实现这种影响或从哪里开始。我在两个博客上看到了这种效果，其中一个博客托管在Blogger上，这些网站的网址如下：http://www.theweekendattic.com/和http://mediamarmalade.com/。我自己博客的网址如下：http://www.blankesque.com

我网站上当前悬停导航栏的CSS和HTML编码详述如下：

url_for

Answer 1

所以我建议你用jquery和jquery.sticky.js插件做到这一点在这里下载：http://stickyjs.com/

所以我改变了你的代码 HTML：

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div class="stick" 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>
  <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

-s用于滚动目的;

JS：

  $(document).ready(function(){
    $(".stick").sticky({topSpacing:0});
  });

CSS：

#wctopdropcont{
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
//just got the fixed position out ;)
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);

这是jsfiddle：https://jsfiddle.net/dp6s9udh/

Answer 2

在初始页面加载时使用CSS隐藏导航栏，并在使用jQuery滚动文档特定数量时使其可见。

添加此CSS，默认情况下会隐藏它。

#wctopdropcont {
  display: block;
}

在标题中添加此jQuery以使其在滚动时可见或隐藏。

jQuery(document).ready(function(){
  jQuery(window).scroll(function(){
      var scrollbar = jQuery(window).scrollTop();
      if (scrollbar > 75) {
        jQuery('#wctopdropcont').fadeIn();
      } else {
        jQuery('#wctopdropcont').fadeOut();
      }
  });
});

编码悬停导航栏仅在滚动时出现

2 个答案: