Question

我的博客上有一个固定位置导航栏，我试图在向下滚动时实现简单的JS来隐藏导航栏。滚动时，导航栏将重新出现。我试图在这里实现的代码的小提琴：https://jsfiddle.net/mariusc23/s6mLJ/31/

出于某种原因，我遇到了问题而且遇到了问题。如果有人想帮忙，这是我的代码。该问题可能是我的导航栏的响应版本吗？任何线索都赞赏。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

通过将此脚本添加到index.html，我能够成功完成我想要做的事情。通过更换“标题”，我也得到了最初的小提琴。与＆＃39;旁边＆＃39;从我自己的代码。耐心得到回报！

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

在滚动上实现隐藏导航栏的问题 - JS

1 个答案: