在滚动-JS上实现隐藏纳维尔的问题

我在博客上有一个固定位置，并且我正在尝试实现简单的JS以在向下滚动时隐藏Navbar。随后，Navbar滚动时会重新出现。我要在此处尝试实现的代码的小提琴：https：//jsfiddle.net/mariusc23/s6mlj/31/

由于某种原因，我遇到了问题，我撞到了墙。如果有人愿意提供帮助，这是我的代码。这个问题可能是我的纳维尔的响应式版本吗？任何线索都赞赏。

链接到我的网站

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
    didScroll = true;
});
setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);
function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}

.nav-up {
  top: -40px;
}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <script src="/javascript/navhider.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<!--NAVBAR-->
<aside id="shadow" class="nav-down">
  <div id="navbar">
    <nav>
      <ul>				
        <li class="noselect"><a href="/">Home</a></li>
        <li class="noselect"><a class="navlink" href="{{ "/contact" | prepend: site.baseurl }}">Contact</a></li>
        <li class="noselect"><a class="navlink" href="{{ "/portfolio" | prepend: site.baseurl }}">Portfolio</a></li>
        <li class="noselect"><a class="navlink" href="https://github.com/joelbitar1986">Github</a></li>
        <li class="noselect"><a class="navlink" href="{{ "/blog" | prepend: site.baseurl }}">Blog</a></li>				
      </ul>
      <div class="handle"><a id="menu-icon">&#9776;</a></div><!--On a mobile device this is the only list item displaying -->
    </nav>
  </div>
</aside>

我能够通过将此脚本添加到index.html中成功完成。我还从我自己的代码中替换"标题"来替换"标题"来工作。耐心回报！

<script type="text/javascript">
        (function()  {
            var documentElem = $(document),
                aside = $('aside'),
                lastScrollTop = 0;
            documentElem.on('scroll', function() {
                var currentScrollTop = $(this).scrollTop();
                //scroll down
                if (currentScrollTop > lastScrollTop ) aside.addClass('hidden');
                //scroll up
                else aside.removeClass('hidden');
                lastScrollTop = currentScrollTop;
            });
        })();
    </script>

相关内容

最新更新

热门标签：