javascript - 我想在向下滚动时显示背景

Question

我想使用此代码在菜单下显示一些背景，但它不起作用。向下滚动 50 像素后应显示背景颜色。有人可以帮助我吗？当我创建仅用于无高度滚动的功能时，它确实可以工作并添加背景，但是当我想在一定距离内切换它时，就会出现问题。

这是代码:

window.onscroll = function() { load() };

function load() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        menu.classList.add('load');
    } else {
        menu.classList.remove('load');
    }
};

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  width: 100%;
  position: fixed;
  z-index: 999;
  margin: 40px 0;
}

nav .menu-items a {
  margin: 0 10px;
  color: #000000;
  border-bottom: 1px solid #ffffff;
}


nav .menu-items.open {
  width: 100%;
  height: 400px;
  visibility: visible;
  opacity: 1;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #ffffff;
}

nav .menu-items.scroll {
  height: 50px;
  background: #585858;
  padding-top: 30px;
}

<nav>
        <div class="logo">
            logo
        </div>
        <div class="hamburger-menu">
            <div class="first-line"></div>
            <div class="second-line"></div>
            <div class="third-line"></div>
        </div>
        <div class="menu-items">
            <a href="#home">Home</a>
            <a href="#description">Description</a>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#contact">Contact</a>
            <a href="log-in.html" target="_blank">Log-in</a>
        </div>
    </nav>

Answer 1

试试这个:

window.onscroll = function() { load() };

function load() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        //if you want color the navbar, put 'menu-items' instead 'text' under here
        document.getElementById("text").style.backgroundColor = 'blue';//or what you want
    } else {
        document.getElementById("text").style.backgroundColor = 'white';//or what you want
    }
};

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  width: 100%;
  position: fixed;
  z-index: 999;
  margin: 40px 0;
}

nav .menu-items a {
  margin: 0 10px;
  color: #000000;
  border-bottom: 1px solid #ffffff;
}

nav .menu-items.open {
  width: 100%;
  height: 400px;
  visibility: visible;
  opacity: 1;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #ffffff;
}

nav .menu-items.scroll {
  height: 50px;
  background: #585858;
  padding-top: 30px;
}

<nav>
        <div class="logo">
            logo
        </div>
        <div class="hamburger-menu">
            <div class="first-line"></div>
            <div class="second-line"></div>
            <div class="third-line"></div>
        </div>
        <div id='menu-items' class="menu-items">
            <a href="#home">Home</a>
            <a href="#description">Description</a>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#contact">Contact</a>
            <a href="log-in.html" target="_blank">Log-in</a>
        </div>
    </nav>
    <div>
    <p id='text' style='position: relative; top: 100px'>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.<br /> Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.<br /> Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.<br />Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.</p>
        </div>

我在菜单的div中添加了一个id菜单项，并修改了javascript文件，将滚动50后的元素与id 文本(文本 Lorem Ipsum)更改颜色并且如果滚动小于 50，则返回白色