滚动时的粘性标题问题

Question

I want to do sticky header on scroll for this I have written following code我想在滚动上做粘性标题为此我编写了以下代码

var body = document.body;
var scrollUp = "scroll-up";
var scrollDown = "scroll-down";
var lastScroll = 0;

if (window.addEventListener) {
  window.addEventListener("scroll", scrollHandler);
} else {
  window.attachEvent("scroll", scrollHandler);
}

function scrollHandler() {
  var currentScroll = window.pageYOffset;
  if (currentScroll === 0) {
    body.classList.remove(scrollDown);
    body.classList.remove(scrollUp);
    return;
  }
  if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
    // down
    body.classList.remove(scrollUp);
    body.classList.add(scrollDown);
  } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
    // up
    body.classList.remove(scrollDown);
    body.classList.add(scrollUp);
  }
  lastScroll = currentScroll;
}

Sticky header is working but its flickerring for some resolutions also It got stuck also sometime.粘性标题正在工作，但它在某些分辨率下也闪烁有时也卡住了。 Please help me in this.请帮助我。 Thanks谢谢

Answer 1

I would recommend using sticky position attribute in CSS.我建议在 CSS 中使用粘性位置属性。

 header { position: sticky; top: 0; background: gray; } main { min-height: 2000px; }

 <header> <h3>StickyHeader</h3> </header> <main> contents </main>

Answer 2

you just need to select the nav element instead of body check the snippet the navbar will be fixed when you scroll up only您只需要选择导航元素而不是正文检查片段导航栏将在您仅向上滚动时固定

 var nav = document.getElementsByTagName('nav')[0]; var scrollUp = "scroll-up"; var scrollDown = "scroll-down"; var lastScroll = 0; if (window.addEventListener) { window.addEventListener("scroll", scrollHandler); } else { window.attachEvent("scroll", scrollHandler); } function scrollHandler() { var currentScroll = window.pageYOffset; if (currentScroll === 0) { nav.classList.remove(scrollDown); nav.classList.remove(scrollUp); return; } if (currentScroll > lastScroll && !nav.classList.contains(scrollDown)) { // down nav.classList.remove(scrollUp); nav.classList.add(scrollDown); } else if (currentScroll < lastScroll && nav.classList.contains(scrollDown)) { // up nav.classList.remove(scrollDown); nav.classList.add(scrollUp); } lastScroll = currentScroll; }

 body { padding: 0; margin: 0; width: 100%; height: 2000px; } nav { width: 100%; height: 50px; background: royalblue; } .scroll-down { position: static; top: initial; left: initial; } .scroll-up { position: fixed; top: 0; left: 0; }

 <nav></nav>

Answer 3

position sticky is not widely supported.位置粘性没有得到广泛支持。 you can try this approach without Javascript https://jsfiddle.net/59gd7a6e/1/您可以在没有 Javascript 的情况下尝试这种方法https://jsfiddle.net/59gd7a6e/1/

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                padding-top: 50px;
            }

            header {
                background: #efefef;
                height: 50px;
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
            }

            section {
                height: 500px;
            }

            section:nth-of-type(2n) {
                background: #ffeda9;
            }
        </style>
    </head>
    <body>
    <header>
        This is the header
    </header>
    <section>
        section 1
    </section>
    <section>
        section 2
    </section>
    <section>
        section 3
    </section>
    </body>
    </html>

滚动时的粘性标题问题

问题描述

3 个解决方案

解决方案1
1 2020-01-02 15:08:47

解决方案2
0 2020-01-02 15:05:48

解决方案3
0 2020-01-02 15:19:06

滚动时的粘性标题问题

问题描述

3 个解决方案

解决方案1 1 2020-01-02 15:08:47

解决方案2 0 2020-01-02 15:05:48

解决方案3 0 2020-01-02 15:19:06

解决方案1
1 2020-01-02 15:08:47

解决方案2
0 2020-01-02 15:05:48

解决方案3
0 2020-01-02 15:19:06