底部对齐的导航棒滚动到顶部

Posted 2023-05-08

【中文标题】底部对齐的导航棒滚动到顶部

【英文标题】：Bottom aligned navigation stick to top on scroll

【发布时间】：2022-01-17 06:34:09

【问题描述】：

我有一个固定的导航，以前在您向上或向下滚动以及到达页面顶部时隐藏和显示该导航。查看工作示例here。

但是我正在努力调整它，以便在导航位于页面底部时它可以工作。我希望导航位于英雄下方，然后当用户滚动时，它将导航固定到顶部。比如这个例子here。

您可以在此JSFiddle 中看到，当您向下滚动页面时，导航会跳到顶部。我希望它能够响应式地工作并自动知道阈值应该是多少，以及在大多数浏览器中工作，包括最新的 IE。

代码如下：

(function () 

        var doc = document.documentElement;
        var w = window;

        var curScroll;
        var prevScroll = w.scrollY || doc.scrollTop;
        var curDirection = 0;
        var prevDirection = 0;

        var header = document.getElementById("top-wrapper");
        var toggled;
        var threshold = 200;

        var checkScroll = function () 
            curScroll = w.scrollY || doc.scrollTop;
            if (curScroll > prevScroll) 
                // scrolled down
                curDirection = 2;
             else 
                //scrolled up
                curDirection = 1;
            

            if (curDirection !== prevDirection) 
                toggled = toggleHeader();
            

            prevScroll = curScroll;
            if (toggled) 
                prevDirection = curDirection;
            
        ;

        var toggleHeader = function () 
            toggled = true;

            if (curDirection === 2 && curScroll > threshold) 
                header.classList.add("hide");
                header.classList.add("fixed");
             else 
                toggled = false;
            

            if (curDirection === 1) 
                header.classList.remove("hide");
                if (curScroll < threshold) header.classList.remove("fixed");
             else 
                toggled = false;
            

            return toggled;
        ;

        window.addEventListener("scroll", checkScroll);

    )();    

body 
  padding: 0;
  margin: 0;


main 
  min-height: 20000px;


#hero-banner
  background:black;
  width:100%;
  height:90vh;


h1 
  padding-top: 40px;
  margin:0;
  color:white;
  text-align:center;


#top-wrapper 
  width: 100%;
  height: 10vh;
  background: red;
  position: relative
  top: auto;
  bottom:0px;
  transition: all 0.3s ease;


#top-wrapper.hide 
  top: -50px;


#top-wrapper.fixed 
  background: blue;
  top:0;
  position:fixed;


ul 
  margin:0;
  padding:0;
  list-style:none;
  width:100%;
  text-align:center;


li 
  display:inline-block;

<main>
  <section id ="hero-banner">
    <h1>Im a heading in the hero</h1>
  </section>
  
  <section id="top-wrapper">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </section>
</main>

【参考方案1】：

如果我正确理解您的问题，您可以使用粘性定位：

#top-wrapper 
    position: sticky;

这使它遵循正常的页面进展，直到它到达页面顶部，然后它被固定。但是，它不适用于某些旧浏览器，例如 IE。

【参考方案2】：

你也可以使用

#top-wrapper 
    position: sticky;
    top: 0;

根据检查您的代码，它似乎与您配置函数以应用 .fixed 类的方式有关。我会寻找一种不同的方法，有更多时间我可以检查什么可以更好地更改导航栏样式

【讨论】：

不幸的是，这不起作用，因为它需要与浏览器兼容并在 IE 中工作。