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菜单项，并通过将放在滚动条50之后， id文本（文本Lorem Ipsum）更改颜色，如果滚动条少于50则返回白色

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

1 个答案: