1

一旦用户开始向下滚动页面，我正在尝试创建一个隐藏但固定在顶部的菜单。到目前为止，我已经设法创建了一个菜单，该菜单在滚动时会粘在顶部，但我一直坚持如何最初隐藏这个菜单。

这是我到目前为止使用的代码：（我正在使用 wordpress-headway）

查询：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
 //STICKY NAV
 var isMobile = {
 Android: function() {
 return navigator.userAgent.match(/Android/i) ? true : false;
 },
 BlackBerry: function() {
 return navigator.userAgent.match(/BlackBerry/i) ? true : false;
 },
 iOS: function() {
 return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
 },
 Windows: function() {
 return navigator.userAgent.match(/IEMobile/i) ? true : false;
 },
 any: function() {
 return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
 }
 };
//Calculate the height of <header>
 //Use outerHeight() instead of height() if have padding
 var aboveHeight = $('.top-row').outerHeight();

 //when scroll
 $(window).scroll(function(){

 //if scrolled down more than the header’s height but this isn't mobile
 if ($(window).scrollTop() > aboveHeight && !isMobile.any()){

 // if yes, add “fixed” class to the <nav>
 // add padding top to the #content 
 // (value is same as the height of the nav)
 $('.block-type-navigation').addClass('fixed').css('top','0').next()
 .css('padding-top','42px');

 } else {

 // when scroll up or less than aboveHeight,
 // remove the “fixed” class, and the padding-top
 $('.block-type-navigation').removeClass('fixed').next()
 .css('padding-top','0');
 }
 });
});
</script>

CSS：

.fixed {
     position:fixed !important;
      left: 0;
      text-align: center;
}
.fixed .block-content {
      display: inline-block;
      text-align: left;
      width: 940px; /* This should be the width of your grid!!! */
      float:none;
}
.fixed {
position:fixed !important;    
 left: 0;      
text-align: center;
display: block !important;
}

这让我发疯，所以我很感激任何帮助！

谢谢！

4

1 回答 1

0

如果您不希望导航显示，除非用户滚动通过某个点，那么它不能总是固定在屏幕顶部之外：

.menu {
    position:fixed;
    top:-42px;
}

然后通过切换类显示或隐藏

.menu.is-visible {
    top:0;
}

使用滚动监听器。

$win = $(window);
$win.on('scroll', function() {
    $(".menu").toggleClass('is-visible', $win.scrollTop() > 42);
});

你甚至可以在top属性中添加一些 CSS 动画

.menu {
    -webkit-transition: top 0.2s ease-in-out;
}

得到一个很酷的过渡。

注意：所有这些代码都是在这里输入的，未经测试。

注意：你也应该对滚动处理程序进行限制。

于 2013-03-13T20:00:34.323 回答