Question

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

虽然结果相似。当我的导航栏停留在顶部时，通过应用赋予其“ postion：fixed”的.sticky，宽度会稍稍增加，但由于文本对齐会产生明显的影响。

为什么其他div的宽度小于静态导航条的宽度？它们不应该都是视口的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％的视口，因此宽度也是一致的。

有人看到这个问题吗？

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

2 个答案: