Question

滚动时，列表项不会显示在滚动栏中。当我将屏幕最小化到一个断点时，汉堡图标也会显示并可以单击，但是当向下滚动包含所有链接的页面时（白色背景页面）则不会随页面滚动。请比较此网站以供参考，因为这很难解释。http://findmatthew.com/

我已经尝试在遇到中断时将位置固定，但是完成此操作后仍然不会显示li标签。滚动时

.toggle {
  padding-left: 48.5%;
  width: 100%;
  font-size: 40px;
  color: red;
  box-sizing: border-box;
  display: none;
}

.nav {
  padding: 0 0 0 0;
  text-align: left;
  margin-bottom: 5px;
}

ul {
  width: 80%;
  margin: 0 auto;
  padding: 0;
}

ul li {
  list-style: none;
  display: inline-block;
  padding: 20px;
}

ul li a {
  text-decoration: none;
  color: olive;
}

#containernav.color {
  position: fixed;
  background: yellow;
  transition: 0.5s;
  width: 100%;
  top: 0;
  padding-bottom: 65px;
  z-index: 10;
  opacity: 0.2;
  ;
}

#logo {
  transform: translate(-20%, -5%);
  max-width: 5%;
  height: auto;
  -webkit-transform: translate(-20%, -5%);
  -moz-transform: translate(-20%, -5%);
  -ms-transform: translate(-20%, -5%);
  -o-transform: translate(-20%, -5%);
}

header #logo h1 {
  margin: 0;
}

header a:hover {
  font-weight: bold;
}


/* MEDIA QUERIES */

@media only screen and (max-width: 847px) {
  .toggle {
    display: block;
  }
  ul {
    width: 100%;
    display: none;
  }
  ul li {
    display: block;
    text-align: center;
  }
  .active {
    cursor: pointer;
    display: block;
  }
}

<header>
  <div id="containernav">
    <nav class="nav">
      <div>
        <ion-icon class="menu toggle" name="menu"></ion-icon>
      </div>
  </div>
  <ul>
    <div id="logo">
      <a href="index.html"><img src="/src/img/logo.jpg.png" width="60" height="60"></a>
    </div>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="work.html">Work</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="#" download>Resume</a></li>
  </ul>
  </nav>
</header>

我希望滚动任务栏时输出粘滞。

并且在满足媒体查询后单击汉堡图标时，也将显示li标签。

Answer 1

我尝试过固定位置

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0;
    }
    
    .navbar {
      overflow: hidden;
      background-color: #333;
      position: fixed;
      top: 0;
      width: 100%;
    }
    
    .navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .navbar a:hover {
      background: #ddd;
      color: black;
    }
    
    .main {
      padding: 16px;
      margin-top: 30px;
      height: 1500px;
      /* Used in this example to enable scrolling */
    }
  </style>
</head>

<body>

  <div class="navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
  </div>

  <div class="main">
    <h1>Fixed Top Menu</h1>
    <h2>Scroll this page to see the effect</h2>
    <h2>The navigation bar will stay at the top of the page while scrolling</h2>

    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
  </div>

</body>

</html>

Answer 2

我查看了您引用的网页，并最终得到了这些。由于您将javascript作为标记之一添加，因此我认为可以添加一些javascript。我还自由地重新定位了一些元素的打开和关闭标签，以使其更加正确。尽管这可能不是您想要的确切结果，但我希望它可以帮助您进一步发展。

代码在以下代码段中：

window.addEventListener("scroll", function() {
            var elementTarget = document.getElementById("frontpage");
            if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
                // scrolled past frontpage
                document.getElementById('containernav').classList.add('fixed');
            } else {
                document.getElementById('containernav').classList.remove('fixed');
            }
        });
        function dropdown(e){
            var speed = 1;
            if ( e.classList.contains('open') ) {
                // If menu is open, close it:
                document.getElementById('dropdown').setAttribute("style", "display:none");
                e.classList.remove("open");
            } else {
                // If menu is not open, open it:
                document.getElementById('dropdown').setAttribute("style", "display:block");
                e.classList.add("open");
            }
        }

body {
    margin: 0;
}
.toggle  {
    padding-left: 48.5%;
    width: 100%;
     font-size: 40px;
     color: red;
     box-sizing: border-box;
     display: none;

}
.nav {
    padding: 0 0 0 0;
    text-align: left;
    margin-bottom: 5px;
}

ul {
    width: 80%;
    margin: 0 auto;
    padding: 0;
}
ul li {
    list-style: none;
    display: inline-block;
    padding: 20px;
}
 ul li a {

     text-decoration: none;
     color: olive;
 }


.fixed {
    position: fixed;
    background: yellow;
    width: 100%;
    top: 0;
    z-index: 10;
}
.frontpage {
    background: dodgerblue;
    min-height: 500px;
    height: 100%;
}

#logo {
    transform: translate(-20%, -5%);
    max-width: 5%;
    height: auto;
    -webkit-transform: translate(-20%, -5%);
    -moz-transform: translate(-20%, -5%);
    -ms-transform: translate(-20%, -5%);
    -o-transform: translate(-20%, -5%);
}

header #logo h1 {
    margin: 0;
}

header a:hover {
    font-weight: bold;
}


/* MEDIA QUERIES */

@media only screen and (max-width: 847px) {
    .toggle {
        display: block;
    }
    #dropdown {
        width: 100%;
        display: none;
    }
    #dropdown.open{
        display: block;
    }
    #dropdown li {
        display: block;
        text-align: center;
    }
    .active {
        cursor: pointer;
        display: block;
    }
}

<header>
    <div id="containernav">
        <nav class="nav">
           <div>
              <ion-icon class="menu toggle" name="menu" onclick="dropdown(this)"><img src="https://picsum.photos/200" width="50px" height="50px" /></ion-icon>
           </div>
       </nav>
       <ul id="dropdown">
           <li id="logo">
               <a href="index.html"><img src="https://picsum.photos/300" width="60" height="60"></a>
           </li>
           <li><a href="index.html">Home</a></li>
           <li><a href="about.html">About</a></li>
           <li><a href="work.html">Work</a></li>
           <li><a href="contact.html">Contact</a></li>
           <li><a href="#"download>Resume</a></li>
       </ul>
     </div>
     <div id="frontpage" class="frontpage">

     </div>
</header>
<div class="content">
<p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <p>Some text some text some text some text..</p>
   <h1 style="height:1000px">loooong header</h1>
</div>

滚动时固定位置的响应式导航栏

2 个答案: