底部對齊的導航棒滾動到頂部-有解無憂

我有一個固定的導航，我以前用它在您向上或向下滾動以及到達頁面頂部時隱藏和顯示。請參閱此處的作業示例。

但是，我正在努力調整它，以便在導航位于頁面底部時它可以作業。我希望導航位于英雄下方，然后當用戶滾動時將導航固定到頂部。像這里的這個例子。

當您向下滾動頁面時，您可以在此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>

uj5u.com熱心網友回復：

如果我正確理解您的問題，您可以使用粘性定位：

#top-wrapper {
    position: sticky;
}

這使得它遵循正常的頁面行程，直到它到達頁面頂部，然后它被修復。但是，它不適用于某些舊瀏覽器，例如 IE。

uj5u.com熱心網友回復：

您可以通過使用實作相同的

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

根據檢查您的代碼，這似乎與您配置函式以應用 .fixed 類的方式有關。我會尋找不同的方法，有更多的時間我可以檢查什么可以更好地更改導航欄樣式

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/380680.html

標籤：javascript html 查询 css

上一篇：未捕獲的型別錯誤：無法讀取未定義的屬性（讀取“preventDefault”）

下一篇：如何在按鈕點擊時添加累積保證金？