HTML/CSS Navbarを上部に固定し、ペイントをスクロールしません

Question

したがって、私のnavbarは私のサイトの上に固定されています。それが欲しかった。しかし、今、私はもうページの下をスクロールできません。 私は本当にそれを修正する方法を知らない。固定タグの削除はオプションではありません。

コードの上にあるdivコンテナには、クラス.barが含まれています。これはトップバーをコントロールするものです。

Theres my code guys。

html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font-size: 20; 
 
    font-family: proxima; 
 
} 
 
.bar { 
 
    width: 100%; 
 
    height: 60px; 
 
    position: fixed; 
 
    background-color: lightblue; 
 
    text-align: center; 
 
} 
 
.img1 { 
 
    margin-top: 30px; 
 
} 
 
.leftbar { 
 
    left: 0; 
 
    height: 1000px; 
 
    position: fixed; 
 
    background-color: lightblue; 
 
    width: 10px; 
 
    margin-top: 37px; 
 
} 
 
.rightbar { 
 
    right: 0; 
 
    height: 1000px; 
 
    position: fixed; 
 
    background-color: lightblue; 
 
    width: 10px; 
 
    margin-top: 37px; 
 
} 
 
.bottombar { 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 10px; 
 
    position: fixed; 
 
    background-color: lightblue; 
 
}

<div class="bar"> 
 
    <img src="img/invert.png" class="logo" alt="geht nicht"> 
 
    <div class="hamburger"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    </div> 
 
    <div class="leftbar"></div> 
 
    <div class="rightbar"></div> 
 
    <div class="bottombar"></div> 
 

 
    <nav class=""> 
 
    <ul class=""> 
 
     <a href="seite2.html"> 
 
     <li>Speakers</li> 
 
     </a> 
 
     <a href="seite3.html"> 
 
     <li>Headphones</li> 
 
     </a> 
 
     <a href="seite4.html"> 
 
     <li>All Products</li> 
 
     </a> 
 
     <a href="seite5.html"> 
 
     <li>The Journal</li> 
 
     </a> 
 
    </ul> 
 

 
    </nav>

Answer 1

あなたは私の神ああ、あなた<div class="bar">

.bar{ 
 
    width:100%; 
 
    height: 60px; 
 
    position: fixed; 
 
    background-color: lightblue; 
 
    text-align: center; 
 
} 
 

 
.img1{ 
 
    margin-top: 30px; 
 
} 
 
.leftbar { 
 
    left:0; 
 
    height: 1000px; 
 
    position:fixed; 
 
    background-color: lightblue; 
 
    width:10px; 
 
    margin-top:37px; 
 
} 
 
.rightbar { 
 
    right:0; 
 
    height: 1000px; 
 
    position:fixed; 
 
    background-color: lightblue; 
 
    width:10px; 
 
    margin-top:37px; 
 
} 
 
.bottombar { 
 
    bottom:0; 
 
    width:100%; 
 
    height: 10px; 
 
    position:fixed; 
 
    background-color: lightblue; 
 
}

<div class="bar"> 
 
<img src="img/invert.png" class="logo" alt="geht nicht"> 
 
    <div class="hamburger"> 
 
     <span></span> 
 
     <span></span> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 
<div class="leftbar"></div> 
 
<div class="rightbar"></div> 
 
<div class="bottombar"></div> 
 

 
    <nav class=""> 
 
     <ul class=""> 
 
      <a href="seite2.html"><li>Speakers</li></a> 
 
      <a href="seite3.html"><li>Headphones</li></a> 
 
      <a href="seite4.html"><li>All Products</li></a> 
 
      <a href="seite5.html"><li>The Journal</li></a> 
 
     </ul> 
 

 
    </nav> 
 
    </div> 
 
    
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae lacus arcu. Aliquam consectetur interdum hendrerit. Etiam in tristique justo, vel pulvinar dui. Aliquam ut eros odio. Aliquam laoreet non lorem ut semper. Aliquam posuere convallis orci maximus posuere. Sed vel leo at diam feugiat tincidunt. Praesent tincidunt magna ac malesuada elementum. Morbi cursus iaculis dolor, vel ornare turpis ullamcorper facilisis. Suspendisse velit dui, egestas at lorem gravida, lobortis consequat arcu. Sed at malesuada arcu, non finibus ex. Pellentesque augue libero, euismod at quam non, commodo egestas nulla.</p> 
 
<p> 
 
Maecenas congue ullamcorper turpis ut iaculis. Morbi quis lectus dignissim, molestie justo et, rutrum mi. Nam bibendum, sapien ac viverra bibendum, purus urna sodales turpis, eget semper orci nulla eget felis. Suspendisse et metus egestas, molestie risus eget, aliquet nisi. Aliquam augue arcu, maximus eget scelerisque in, rhoncus sodales lacus. Nam malesuada tempor felis, vitae pulvinar dolor sollicitudin id. Vestibulum gravida turpis interdum augue convallis, in rutrum risus luctus. Nunc luctus ultrices tempus. Donec nisl lacus, vestibulum id dolor nec, auctor ultrices eros. Pellentesque pharetra maximus pellentesque. Vivamus sed tincidunt ante. Nulla porttitor vehicula quam rhoncus accumsan. Nunc ultricies, lorem ut faucibus pretium, ante sem fermentum purus, ut pretium ex nulla vel augue. Quisque tempus lectus vel aliquet pharetra. In vel sem nec nisl luctus ultrices. 
 
</p> 
 
<p> 
 

 

 
Nullam varius ac elit eget egestas. Duis quis lacus sed mauris pellentesque iaculis. Ut pretium nunc eget nisi suscipit, eu fringilla orci finibus. Maecenas vel convallis orci, a commodo nunc. Fusce egestas posuere urna, vitae fermentum ipsum maximus non. Pellentesque at luctus orci. Quisque condimentum mi a auctor ullamcorper. Sed sodales massa ac sodales tempus. Duis nisl est, elementum eu facilisis nec, egestas vel arcu.</p> 
 

 
<p> 
 

 

 
Morbi maximus condimentum accumsan. Donec at sem sagittis, elementum nisl eget, semper est. Nullam sollicitudin sodales aliquet. In sit amet nunc turpis. Etiam vehicula sem dui, id scelerisque sapien vulputate tristique. Pellentesque vitae lorem sit amet augue pretium hendrerit eu at tellus. Vestibulum ornare mauris at orci tincidunt, id blandit urna sollicitudin. Morbi porttitor, nisl quis tincidunt ornare, leo sapien malesuada mauris, in gravida nibh odio malesuada felis. In sit amet felis vulputate, luctus purus id, sollicitudin turpis. Nunc semper feugiat elit. Donec pretium orci vestibulum orci efficitur, sed dignissim nunc ultrices.</p> 
 

 
<p> 
 
Maecenas lacus mauris, luctus sed odio sed, dignissim consequat ex. Suspendisse elit ex, malesuada ac sagittis vel, sodales sit amet lacus. Aliquam ut rutrum mi. Proin vitae nibh cursus, fringilla tellus et, feugiat sem. Duis feugiat sapien id ipsum consequat blandit. In ac sollicitudin odio, at hendrerit augue. Quisque faucibus vitae metus vel pharetra. Sed et lorem nec ligula tempor pulvinar. Nunc sit amet libero eu felis rutrum elementum. Nam sem arcu, tincidunt id nibh et, faucibus fringilla lorem. Pellentesque interdum neque et urna vestibulum cursus. Etiam commodo laoreet lorem, non cursus elit sollicitudin vitae. Phasellus fringilla, est congue vestibulum ornare, quam tellus aliquam mi, at bibendum velit lacus nec felis. 
 
    </p> 
 
    
 
    <p> 
 

 

 
Nullam varius ac elit eget egestas. Duis quis lacus sed mauris pellentesque iaculis. Ut pretium nunc eget nisi suscipit, eu fringilla orci finibus. Maecenas vel convallis orci, a commodo nunc. Fusce egestas posuere urna, vitae fermentum ipsum maximus non. Pellentesque at luctus orci. Quisque condimentum mi a auctor ullamcorper. Sed sodales massa ac sodales tempus. Duis nisl est, elementum eu facilisis nec, egestas vel arcu.</p> 
 

 
<p> 
 

 

 
Morbi maximus condimentum accumsan. Donec at sem sagittis, elementum nisl eget, semper est. Nullam sollicitudin sodales aliquet. In sit amet nunc turpis. Etiam vehicula sem dui, id scelerisque sapien vulputate tristique. Pellentesque vitae lorem sit amet augue pretium hendrerit eu at tellus. Vestibulum ornare mauris at orci tincidunt, id blandit urna sollicitudin. Morbi porttitor, nisl quis tincidunt ornare, leo sapien malesuada mauris, in gravida nibh odio malesuada felis. In sit amet felis vulputate, luctus purus id, sollicitudin turpis. Nunc semper feugiat elit. Donec pretium orci vestibulum orci efficitur, sed dignissim nunc ultrices.</p> 
 

 
<p> 
 
Maecenas lacus mauris, luctus sed odio sed, dignissim consequat ex. Suspendisse elit ex, malesuada ac sagittis vel, sodales sit amet lacus. Aliquam ut rutrum mi. Proin vitae nibh cursus, fringilla tellus et, feugiat sem. Duis feugiat sapien id ipsum consequat blandit. In ac sollicitudin odio, at hendrerit augue. Quisque faucibus vitae metus vel pharetra. Sed et lorem nec ligula tempor pulvinar. Nunc sit amet libero eu felis rutrum elementum. Nam sem arcu, tincidunt id nibh et, faucibus fringilla lorem. Pellentesque interdum neque et urna vestibulum cursus. Etiam commodo laoreet lorem, non cursus elit sollicitudin vitae. Phasellus fringilla, est congue vestibulum ornare, quam tellus aliquam mi, at bibendum velit lacus nec felis. 
 
    </p>

Answer 2

を閉じるのを忘れていました。愚かな質問には申し訳ありません。この1つを見たことがありません 速い返信ありがとう