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

时间:2016-01-18 17:30:52

标签: jquery html css navbar

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

我不完全确定我是否正确地说明了这一点,但是如果你进入我的博客 - http://www.blankesque.com - 你应该对手头的问题有更好的了解。

我已经在标签/正文上面添加了jquery编码:

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

1 个答案:

答案 0 :(得分: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将更改“显示"选项"阻止"再次向下滚动时,菜单栏将会显示。