Question

我正在尝试创建一个隐藏但在用户开始向下滚动页面后显示在顶部的菜单。到目前为止，我已经设法创建了一个在滚动时粘到顶部的菜单，但我最初仍然坚持如何隐藏此菜单。

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

JQuery的：

<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;
}

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

谢谢！

Answer 1

如果您不希望导航显示，除非用户已滚动通过某个点，则无法始终将其固定在屏幕顶部：

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

然后通过切换类

来显示或隐藏

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

使用滚动侦听器。

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

您甚至可以将一些CSS动画添加到top属性

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

获得一个很酷的过渡。

注意：所有这些代码都在此输入，未经过测试。

注意：你也一定要在滚动处理程序上添加throttle。

滚动时出现的粘性导航

1 个答案: