jquery - 如何自定义导航栏上的悬停效果

Question

我遇到的问题有点微不足道，但我希望有人能帮助找到合适的解决方案。我将博客的导航栏编码为在读者向下滚动页面之前不会出现该栏。这正是我想要执行效果的方式，但是，我注意到，一旦您刷新页面，导航栏就会出现在页面顶部，但是当您向下滚动时，它会稍微消失然后重新出现。我想知道是否可以在 html 编码中添加一些东西，以防止导航栏在刷新后立即出现在页面顶部。

我不完全确定我的措辞是否正确，但如果您访问我的博客 - http://www.blankesque.com - 你应该对手头的问题有更好的了解。

我已经包含了我在标签/body 上方添加的 jquery 编码:

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

Answer 1

你好像忘了把css改成

display: none

你的 CSS 看起来像这样:

#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;
   display: block;
}

display: block 在那里有两次。

试试这个:

#wctopdropcont {
   width: 100%;
   height: 45px;
   display: none;
   padding: 5.5px 0 0 0;
   z-index: 100;
   top: -2px;
   left: 0px;
   position: fixed;
   background: #f5f5f5;
   border-bottom: 1px solid #f0f0f0;
}

当您再次向下滚动时，您的 JavaScript 会将“显示”选项更改为“阻止”，因此菜单栏将可见。