文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >菜单列表在向上或向下滚动后不会显示

问菜单列表在向上或向下滚动后不会显示
EN

Stack Overflow用户
提问于 2022-09-24 08:46:34
回答 2查看 38关注 0票数 0

目标：

菜单列表包括当你向下滚动或向上滚动时应该显示的文本“咖啡、茶和牛奶”。

问题：

菜单列表咖啡，茶和牛奶将不会显示后，使用滚动和向下。

我错过了什么部分？

​

​

JSbin：

https://jsbin.com/rinewiduyi/edit?html,css,js,output

谢谢!

代码语言：javascript
复制
<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="container">
            <div id="top-content" class="palette-1">
              <div id="testtest">
                <img src="https://www.logolynx.com/images/logolynx/1f/1fa1c2a2ea0d69a85215d878f3a0652a.jpeg" width="100px" height="45px" />
              </div>
              <ul id="iconmenu" class="nav-menu">
                <li class="title">Coffee</li>
                <li class="title">Tea</li>
                <li class="title">Milk</li>
              </ul>
            </div>
            <div id="content" class="palette-2">
                content
                <br />
                              content
                <br />
                              content
                      <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                       <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                        <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                 <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                             <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
                <br />                content
            </div>
            <div id="footer" class="palette-4">
                footer
            </div>

        </div>
    </body>
</html>

代码语言：javascript
复制
body {
    color: white;
    text-align: center;
    box-sizing: content-box;
    margin: 0;
}

.palette-1 {
    background-color: #83B2FF;
}

.palette-2 {
    background-color: #8BF18B;
}

.palette-4 { 
    background-color: #FF8650;
}

.palette-5 { 
    background-color: #FF555E;
}

#content {
    grid-area: content;
}

#footer {
    grid-area: footer;
}


@media only screen and (min-width: 1000px) {

  #container {
    background-color: #FFE981;
    width: 100%;
    display: grid;
    grid-template-areas:
      "left-header header right-header"
      "left-content content right-content"
      "left-footer footer right-footer";
    row-gap: 1rem;
        grid-template-columns: 1fr 1000px 1fr;
    grid-template-rows: auto auto auto;    
    grid-gap: 5px;
    box-sizing: border-box;
    height: 100%;
    background-color: #8cffa0;
  }  
  
  #top-content {
    /*    */

    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 50px;
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #content {
    margin-top: 50px;
  }  
  
  #asdfasdf {
    display: none;
  }
  
  ul.nav-menu {
    margin: 0;
  }

  ul.nav-menu > li {
    display: inline-block;
    padding: 0 10px 0 10px;
    margin: 0;
    line-height: 70px;
    border-top: 1px solid #83B2FF;

  }

  ul.nav-menu > li:hover {
    background-color: #2779BF;
    border-top: 1px solid #425c62;
  }  
}            


@media only screen and (max-width: 999px) {

  #container {
    background-color: #FFE981;
    width: 100%;
    display: grid;
    grid-template-areas:
      "header"
      "content"
      "footer";
    row-gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-gap: 5px;
    box-sizing: border-box;
    height: 200px;
    background-color: #8cffa0;
  }    
  
  #top-content {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: center;
    
    border-top: 3px solid #425c62;
  }
  
  #asdfasdf {
    display: none;
  }
  
  ul.nav-menu {
    margin: 0;
  }

  ul.nav-menu > li {
    display: inline-block;
    padding: 0 10px 0 10px;
    margin: 0;
    line-height: 70px;
    border-top: 1px solid #83B2FF;

  }

  ul.nav-menu > li:hover {
    background-color: #2779BF;
    border-top: 1px solid #425c62;
  }  
  
  #content {

  }
  
}

代码语言：javascript
复制
window.onscroll = function () {
    scrollFunction();
};

// get initial pageYOffset value
let originOffset = window.pageYOffset;

function scrollFunction() {
  
    // current pageYOffset value
    const curOffset = window.pageYOffset;
          
    if (curOffset - originOffset > 0 && document.documentElement.scrollTop > 100) {
      // down
      document.getElementById('top-content').style.display = 'none';
      document.getElementById("top-content").style.marginTop = "-50px";  

    } else {
      // up
      document.getElementById('top-content').style.display = 'block';
      document.getElementById("top-content").style.marginTop = "0";
    }
    // change originOffset value every time
    originOffset = window.pageYOffset;
}
css
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-09-24 14:55:05

我想我找到你的问题了。其实@Vijay的答案是正确的。但让我补充一点细节。

菜单实际上在那里，但是它的容器高度不足以显示它，因为在您的@media only screen and (min-width: 1000px中，您将height: 50px设置为top-content。但是在其他媒体查询中给它200 so，所以它实际上在小于1000 so的屏幕上工作。

另一个问题是，top-content的默认显示是flex，但是在js代码中将其设置为阻塞，每个显示都会产生不同的结果。

因此，在CSS中给它提供足够的height，或者在js代码中使用默认样式，即flex。

​

代码语言：javascript
复制
window.onscroll = function() {
  scrollFunction();
};

// get initial pageYOffset value
let originOffset = window.pageYOffset;

function scrollFunction() {

  // current pageYOffset value
  const curOffset = window.pageYOffset;

  if (curOffset - originOffset > 0 && document.documentElement.scrollTop > 100) {
    // down
    document.getElementById('top-content').style.display = 'none';
    document.getElementById("top-content").style.marginTop = "-50px";

  } else {
    // up
    document.getElementById('top-content').style.display = 'block'; // change this to flex
    document.getElementById("top-content").style.marginTop = "0";
  }
  // change originOffset value every time
  originOffset = window.pageYOffset;
}
代码语言：javascript
复制
body {
  color: white;
  text-align: center;
  box-sizing: content-box;
  margin: 0;
}

.palette-1 {
  background-color: #83B2FF;
}

.palette-2 {
  background-color: #8BF18B;
}

.palette-4 {
  background-color: #FF8650;
}

.palette-5 {
  background-color: #FF555E;
}

#content {
  grid-area: content;
}

#footer {
  grid-area: footer;
}

@media only screen and (min-width: 1000px) {
  #container {
    background-color: #FFE981;
    width: 100%;
    display: grid;
    grid-template-areas: "left-header header right-header" "left-content content right-content" "left-footer footer right-footer";
    row-gap: 1rem;
    grid-template-columns: 1fr 1000px 1fr;
    grid-template-rows: auto auto auto;
    grid-gap: 5px;
    box-sizing: border-box;
    height: 100%;
    background-color: #8cffa0;
  }
  #top-content {
    
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 150px; /* changed this from 50 to bigger height   */
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #content {
    margin-top: 50px;
  }
  #asdfasdf {
    display: none;
  }
  ul.nav-menu {
    margin: 0;
  }
  ul.nav-menu>li {
    display: inline-block;
    padding: 0 10px 0 10px;
    margin: 0;
    line-height: 70px;
    border-top: 1px solid #83B2FF;
  }
  ul.nav-menu>li:hover {
    background-color: #2779BF;
    border-top: 1px solid #425c62;
  }
}

@media only screen and (max-width: 999px) {
  #container {
    background-color: #FFE981;
    width: 100%;
    display: grid;
    grid-template-areas: "header" "content" "footer";
    row-gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-gap: 5px;
    box-sizing: border-box;
    height: 200px;
    background-color: #8cffa0;
  }
  #top-content {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 3px solid #425c62;
  }
  #asdfasdf {
    display: none;
  }
  ul.nav-menu {
    margin: 0;
  }
  ul.nav-menu>li {
    display: inline-block;
    padding: 0 10px 0 10px;
    margin: 0;
    line-height: 70px;
    border-top: 1px solid #83B2FF;
  }
  ul.nav-menu>li:hover {
    background-color: #2779BF;
    border-top: 1px solid #425c62;
  }
}
代码语言：javascript
复制
<body>
  <div id="container">
    <div id="top-content" class="palette-1">
      <div id="testtest">
        <img src="https://www.logolynx.com/images/logolynx/1f/1fa1c2a2ea0d69a85215d878f3a0652a.jpeg" width="100px" height="45px" />
      </div>
      <ul id="iconmenu" class="nav-menu">
        <li class="title">Coffee</li>
        <li class="title">Tea</li>
        <li class="title">Milk</li>
      </ul>
    </div>
    <div id="content" class="palette-2">
      content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
      <br /> content
    </div>
    <div id="footer" class="palette-4">
      footer
    </div>

  </div>
</body>

​

票数 0
EN

Stack Overflow用户

发布于 2022-09-24 12:20:11

菜单仍然存在，但是由于您正在从JS中设置display: block;，但是在这种情况下，您的设计系统可以使用display: flex;，您的标题不显示菜单内联，当它变成block时，它将将菜单包装在徽标下面。由于您有height: 50px和overflow: hidden，所以溢出项下隐藏着它们。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73835873

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档