导航栏在粘贴时会增加宽度。为什么？

Question

我在这里查看了关于此的非常相似的问题，但似乎都将导航栏放在包装器中，而我没有。

虽然结果相似。当我的导航栏贴在顶部时，通过应用 .sticky 并赋予它“位置：固定”，它会稍微增加宽度，但由于文本对齐，会产生明显的影响。

为什么其他div的宽度小于navbar静态时的宽度？它们不应该都是 100% 的视口吗？

如何阻止这种情况发生？

任何建议表示赞赏！

学习

    const navBanner = document.getElementById("navBanner");
    const sticky = navBanner.offsetTop;
    
    window.onscroll=function(){
              
      if (window.pageYOffset >= sticky) {
        navBanner.classList.add("sticky");  
      } else {
        navBanner.classList.remove("sticky");
      }
        
    };

    body{
      font-family: 'Open Sans', sans-serif;
    }
    
    .banner{
        padding-top:10px;
        padding-bottom: 10px;
        text-align: center;
    }
    
    #titleBanner{
        height: 300px; 
        padding-top:200px;
        background-color: lightgray;
        color: white;
    }
    
    #navBanner{
        height: 25px;
        background-color: lightgray;
        overflow: hidden;
        width: 100%;
    }
                
    #navBanner a{
        text-decoration: none;
        color: black;
    }
    
    #navBanner a[href="#techBanner"]{
        margin-left: 400px;
        margin-right: 400px;
    }
    
    .sticky {
      position: fixed;
      top: 0;
      background-color: darkgray !important; 
      color: white !important
    }
   
    
    #techBanner{
        height: 300px;
        background-color: lightgray;
        width: 100%;
    }
    
  
   
    h1{
      
      font-size: 500%;
      font-family: sans-serif;
    }
    
    #profBanner{
        padding: 150px;
        border: solid black 1px;
    }
    
    #profile{
        width:50%;
        margin: auto;
        text-align: justify;
    }
    
    #contactBanner{
         
        height:1000px;
        
    }

<div id="titleBanner" class="banner">    

  <h1>Lorem ipsum dolor</h1>
     
</div>
    

<div class="banner" id="navBanner">
          
        <a class="link" href="#profBanner">About me</a>
        <a class="link" href="#techBanner">Technical</a>
        <a class="link" href="#contactBanner">Contact</a>
        
</div>

<div class="banner" id="profBanner">
    
  <div id="profile">
      
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id lobortis lorem, ac aliquet nunc. Mauris vel est viverra, malesuada metus a, vehicula quam. Vestibulum a pretium felis, eget porta massa. Proin dui augue, mollis ac blandit ut, egestas non augue. Fusce at nisl vel nulla mollis dictum. Praesent ut metus luctus, maximus velit vel, pulvinar mauris. </p>
      
  </div>
    
</div>


<div  id="techBanner">

 
</div>
    
<div  id="contactBanner">

 
</div>

Answer 1

您可以使用 !important 将类粘性的宽度设置为自动，并将左右设置为 8px（如果您想要全宽，则将它们设置为 0）。

.sticky {
    position: fixed;
    top: 0;
    background-color: darkgray !important;
    color: white !important;
    width: auto !important;
    left: 8px;
    right: 8px;
}

const navBanner = document.getElementById("navBanner");
    const sticky = navBanner.offsetTop;
    
    window.onscroll=function(){
              
      if (window.pageYOffset >= sticky) {
        navBanner.classList.add("sticky");  
      } else {
        navBanner.classList.remove("sticky");
      }
        
    };

body{
      font-family: 'Open Sans', sans-serif;
    }
    
    .banner{
        padding-top:10px;
        padding-bottom: 10px;
        text-align: center;
    }
    
    #titleBanner{
        height: 300px; 
        padding-top:200px;
        background-color: lightgray;
        color: white;
    }
    
    #navBanner{
        height: 25px;
        background-color: lightgray;
        overflow: hidden;
        width: 100%;
    }
                
    #navBanner a{
        text-decoration: none;
        color: black;
    }
    
    #navBanner a[href="#techBanner"]{
        margin-left: 400px;
        margin-right: 400px;
    }
    
    .sticky {
        position: fixed;
        top: 0;
        background-color: darkgray !important;
        color: white !important;
        width: auto !important;
        left: 8px;
        right: 8px;
    }
   
    
    #techBanner{
        height: 300px;
        background-color: lightgray;
        width: 100%;
    }
    
  
   
    h1{
      
      font-size: 500%;
      font-family: sans-serif;
    }
    
    #profBanner{
        padding: 150px;
        border: solid black 1px;
    }
    
    #profile{
        width:50%;
        margin: auto;
        text-align: justify;
    }
    
    #contactBanner{
         
        height:1000px;
        
    }

<div id="titleBanner" class="banner">    

  <h1>Lorem ipsum dolor</h1>
     
</div>
    

<div class="banner" id="navBanner">
          
        <a class="link" href="#profBanner">About me</a>
        <a class="link" href="#techBanner">Technical</a>
        <a class="link" href="#contactBanner">Contact</a>
        
</div>

<div class="banner" id="profBanner">
    
  <div id="profile">
      
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id lobortis lorem, ac aliquet nunc. Mauris vel est viverra, malesuada metus a, vehicula quam. Vestibulum a pretium felis, eget porta massa. Proin dui augue, mollis ac blandit ut, egestas non augue. Fusce at nisl vel nulla mollis dictum. Praesent ut metus luctus, maximus velit vel, pulvinar mauris. </p>
      
  </div>
    
</div>


<div  id="techBanner">

 
</div>
    
<div  id="contactBanner">

 
</div>

Answer 2

在您的帮助下，我想出了一个非常简单的解决方案。

在应用 .sticky 之前，我意识到 body 是我的导航栏的容器！我怎么错过了！？！

所以，我设置了 . . .

主体{ 宽度:100%; }

现在 .sticky 应用程序之前的所有 div 和导航栏都是 100% 的视口，所以都是一致的宽度。

有人看到这方面的问题吗？

Answer 3

您可以使容器的 with 使用视口宽度（vw）而不是百分比（％）。对我来说，当我计算并将固定容器的宽度减小 100 像素时，它就起作用了。

.sticky {
      position: fixed;
      top: 0;
      width: calc(100% - 100px);
    }

`