滚动时具有固定位置的响应式导航栏答案

【问题标题】：Responsive navigation bar with fixed position when scrolling滚动时具有固定位置的响应式导航栏
【发布时间】：2019-06-06 18:25:43
【问题描述】：

滚动时，我的列表项不显示在滚动条中。同样，当我将屏幕最小化到断点时，汉堡图标会显示并且是可点击的，但是当向下滚动包含所有链接的页面（白色背景页面）时，它不会随页面滚动。请比较这个网站以供参考，因为这很难解释.. 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 标签也会显示。

【问题讨论】：

您的 HTML 无效，请拆分 HTML 和 CSS 的代码块以提高可读性。欢迎！
顺便说一句，html 格式不正确...<div id="containernav"> 在 <nav> 元素之后 4 行被关闭...所以任何方式的元素都不会正确显示
@LukeSavefrogs 谢谢我是新开发者我该如何解决这个问题？
@JackJones 只需将第 6 行的结束 </div> 移动到 </nav> 之后的行
还将 div 元素移出 ul 元素。见：4.4.6 The ul element's Content Model

标签： javascript html css ionic-framework

【解决方案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>

【讨论】：

您好，感谢您抽出宝贵的时间来做这件事。我希望 li 标签位于背景图像之上，然后在滚动背景时以任何颜色背景显示。同样，当屏幕最小化时，我希望出现一个汉堡图标，该图标可单击以显示我的 li 标签。请查看网站glennreyes.com 以供参考，我正在努力实现

【解决方案2】：

我查看了您引用的网页并最终得到了这个。由于您添加了 javascript 作为标签之一，我认为添加一些 javascript 是可以的。我还冒昧地重新定位了一些元素的打开和关闭标签，以使其更正确。虽然这可能不是您正在寻找的确切结果，但我希望它可以帮助您走得更远。

代码在下面的sn-p中：

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>

【讨论】：