当用户滚动到页面顶部时重新定位导航栏（jQuery）

Question

我的网站上有一个问题，当用户滚动到页面顶部时，我的替代导航栏（在主导航栏下方）在页面上的位置太高，位于主导航栏后面。

滚动页面其他区域时，主导航栏和替代导航栏正确对齐。我需要做的是，当用户滚动到页面顶部时，使用 jQuery“偏移”alt-navbar，这样它就会定位得更靠下一些。我不知道使用什么 jQuery 函数来获取“页面顶部”位置值（例如：当文档位于顶部位置时执行某些操作）。

我也会发送 2 张图片来更详细地展示我的意思以及下面的源代码。

jQuery 代码：

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

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="scroll_functionality.js">
    </script>
<style>
#navbar {
  height: 0em;
  display: flex;
  width: 100%;
  padding: 1.75rem 0rem 1.75rem 0rem;
  background: white;
  align-items: center;

  border-bottom: 1.5px solid #d0d8d9;
}
#find-your-memory {
font-family: "Contrail One";
}
</style>
</head>
<body>
    <header id="main-flex-container">
        <nav id="navbar">
            <ul>    
                    <li> 
                        <a href="https://swiftwintekstore.com/pages/under-dev" rel="Our Top Picks" title="Top Picks"> 
                            Top Picks
                            <span style="color: blue; font-size: x-small; font-weight: bold; margin-left: .275em;"> 
                            (New)
                            </span>
                        </a>
                    </li>     
                    <li id="find-your-memory"> 
                        <a href="https://swiftwintekstore.com/pages/memory-ssd-selector" rel="Find the best Memory or SSD drive for your needs" title="Micron Memory Selector"> 
                            Find your Memory
                            <span style="color: blue; font-size: x-small; font-weight: bold; margin-left: .275em;"> 
                            (Upcoming)
                            </span>
                        </a>
                    </li>             
                    <li> 
                        <a href="https://swiftwintekstore.com/blogs/news" rel="News about our products and technology" title="News Feed"> 
                            News
                        </a>
                    </li>      
            </ul>
        </nav>
    </header>
</body>
</html>

CSS：

#main-flex-container {
    background-color: whitesmoke;
  }
  #navbar ul {
    display: flex;
    list-style: none;
  }
  #navbar a {
    color: black;
    display: flex;
    font-size: small;
    margin-right: 0.75rem;
    align-items: center;
    padding-bottom: 5px;
    padding-top: 5px;
  }
  a {
    text-decoration: 0px;
  }
  a:hover {
    border-bottom: 2px solid rgb(255, 70, 14);
  }
  @media only screen and (max-width: 900px) {
    #navbar a {
      padding-bottom: 0.175rem;
    }
  }
  header {
    height: 38px;
    position: fixed;
    top: 5.1rem;
    transition: top 0.1s ease-in-out;
    width: 100%;
    z-index: 1;
  }
  .nav-up {
    top: -40px;
  }

由于对问题缺乏了解，我自己还没有真正尝试过任何事情。

当用户滚动到页面顶部时重新定位导航栏（jQuery）

问题描述投票：0回答：1

1个回答

最新问题

当用户滚动到页面顶部时重新定位导航栏（jQuery）

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1