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

Question

我遇到的问题有点微不足道，但我希望有人能帮助找到合适的解决方案。我对博客的导航栏进行了编码，直到 reader 向下滚动页面时该栏才会出现。这正是我想要执行效果的方式，但是，我注意到，一旦您刷新页面，导航栏就会出现在页面顶部，但是当您向下滚动时，它会稍微消失然后重新出现。我想知道我是否可以在 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;
}

显示：方块在里面两次。

试试这个：

#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 将在您再次向下滚动时将“显示”选项更改为 "block"，因此菜单栏将可见。

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

How To Customise The Hover Effect On The Navigation Bar

html

css

jquery

navbar