Javascript 滚动条上的粘性标题问题_Javascript_Html_Scroll_Sticky_Onscroll

Javascript 滚动条上的粘性标题问题

javascript html scroll

Javascript 滚动条上的粘性标题问题,javascript,html,scroll,sticky,onscroll,Javascript,Html,Scroll,Sticky,Onscroll,我想在滚动条上做粘性标题，我已经写了以下代码 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

我想在滚动条上做粘性标题，我已经写了以下代码

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

var body=document.body；
var scrollUp=“scroll up”；
var scrollDown=“scroll down”；
var lastScroll=0；
if（window.addEventListener）{
addEventListener（“滚动”，scrollHandler）；
}否则{
attachEvent（“滚动”，scrollHandler）；
}
函数scrollHandler（）{
var currentScroll=window.pageYOffset；
如果（currentScroll==0）{
body.classList.remove（向下滚动）；
body.classList.remove（向上滚动）；
返回；
}
如果（currentScroll>lastScroll&&！body.classList.contains（向下滚动））{
//向下
body.classList.remove（向上滚动）；
body.classList.add（向下滚动）；
}else if（currentScroll


Sticky header正在工作，但它的某些分辨率会闪烁，有时也会卡住。请帮我做这件事。谢谢您只需要选择导航元素而不是车身
检查代码段仅向上滚动时导航栏将被修复

var nav=document.getElementsByTagName（'nav'）[0]；
var scrollUp=“scroll up”；
var scrollDown=“scroll down”；
var lastScroll=0；
if（window.addEventListener）{
addEventListener（“滚动”，scrollHandler）；
}否则{
attachEvent（“滚动”，scrollHandler）；
}
函数scrollHandler（）{
var currentScroll=window.pageYOffset；
如果（currentScroll==0）{
nav.classList.remove（向下滚动）；
nav.classList.remove（向上滚动）；
返回；
}
如果（currentScroll>lastScroll&&！nav.classList.contains（向下滚动））{
//向下
nav.classList.remove（向上滚动）；
nav.classList.add（向下滚动）；
}else if（currentScroll

正文{
填充：0；
保证金：0；
宽度：100%；
高度：2000px；
}
导航{
宽度：100%；
高度：50px；
背景：皇家蓝；
}
.向下滚动{
位置：静态；
顶部：首字母；
左：首字母；
}
.向上滚动{
位置：固定；
排名：0；
左：0；
}
我建议在CSS中使用sticky position属性

标题{
位置：粘性；
排名：0；
背景：灰色；
}
主要{
最小高度：2000px；
}

粘性割台
目录
位置粘性没有得到广泛支持。
您可以在不使用Javascript的情况下尝试这种方法


文件
身体{
填充顶部：50px；
}
标题{
背景：#efef；
高度：50px；
位置：固定；
左：0；
右：0；
排名：0；
}
部分{
高度：500px；
}
截面：第n种类型（2n）{
背景：#ffeda9；
}
这是标题
第一节
第二节
第三节

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