Bootstrap 3 seltsames Affix Problem auf Chrom

Question

Also ich versuche, die Bootstrap Affix-Funktion verwenden, aber es wirkt seltsam. Wenn Sie versuchen, über den Header-Abschnitt nach unten zu scrollen, wird automatisch nach oben gesprungen. Dies geschieht, wenn die Bildschirmbreite unter 1100px liegt. Es ist auch nur in Chrome, wenn Sie mit der Bildlaufleiste blättern. Ich habe ein bootply Setup, um zu zeigen, was passiert. Kann mir bitte jemand helfen, herauszufinden, was los ist?

Dies zu beobachten video könnte helfen.

CSS:

header { 
       height: 365px; 
       background: url("http://i.imgur.com/wU2YhOJ.png"); 
       background-color: #262626; 
       background-size: cover; 
       background-position: center; 
      } 

      header h1{ 
       font-family: Montserrat, sans-serif !important; 
       font-size: 5.5em; 
       color: white; 
       word-break: normal; 
       padding-top: 115px; 

      } 

      body h1 { 
       font-family: 'Lato', sans-serif; 
       line-height: 72px; 
      } 

      body, footer { font-family: 'Open Sans', sans-serif !important; } 

      body p { line-height: 28px; } 

      footer { background-color: #262626; } 

      .fixed { 
       position: fixed; 
      } 

      /* sidebar */ 
      .bs-docs-sidebar { 
       padding-left: 20px; 
       margin-top: 60px; 
       margin-bottom: 20px; 
      } 

      /* all links */ 
      .bs-docs-sidebar .nav>li>a { 
       color: #999; 
       border-left: 2px solid transparent; 
       padding: 4px 20px; 
       font-size: 13px; 
       font-weight: 400; 
      } 

      /* nested links */ 
      .bs-docs-sidebar .nav .nav>li>a { 
       padding-top: 1px; 
       padding-bottom: 1px; 
       padding-left: 30px; 
       font-size: 12px; 
      } 

      /* active & hover links */ 
      .bs-docs-sidebar .nav>.active>a, 
      .bs-docs-sidebar .nav>li>a:hover, 
      .bs-docs-sidebar .nav>li>a:focus { 
       color: #262626;     
       text-decoration: none;   
       background-color: transparent; 
       border-left-color: #262626; 
      } 
      /* all active links */ 
      .bs-docs-sidebar .nav>.active>a, 
      .bs-docs-sidebar .nav>.active:hover>a, 
      .bs-docs-sidebar .nav>.active:focus>a { 
       font-weight: 700; 
      } 
      /* nested active links */ 
      .bs-docs-sidebar .nav .nav>.active>a, 
      .bs-docs-sidebar .nav .nav>.active:hover>a, 
      .bs-docs-sidebar .nav .nav>.active:focus>a { 
       font-weight: 500; 
      } 

      /* hide inactive nested list */ 
      .bs-docs-sidebar .nav ul.nav { 
       display: none;   
      } 
      /* show active nested list */ 
      .bs-docs-sidebar .nav>.active>ul.nav { 
       display: block;   
      } 
      /* special back to top styling */ 
      .back-to-top:hover, 
      .back-to-top:focus{ 
       border-left-color: transparent !important; 
      } 

HTML:

<div class="col-sm-2" id="body-right"> 
        <nav class="col-xs-3 bs-docs-sidebar"> 
         <ul id="sidebar" class="nav nav-stacked fixed"> 
          <li> 
           <a href="#GroupA">Getting Started</a> 
           <ul class="nav nav-stacked"> 
            <li><a href="#GroupASub1">Sub-Group 1</a></li> 
            <li><a href="#GroupASub2">Sub-Group 2</a></li> 
           </ul> 
          </li> 
          <li> 
           <a href="#GroupB">Font Awesome</a> 
           <ul class="nav nav-stacked"> 
            <li><a href="#GroupBSub1">Sub-Group 1</a></li> 
            <li><a href="#GroupBSub2">Sub-Group 2</a></li> 
           </ul> 
          </li> 
          <li> 
           <a href="#GroupC">Bootstrap</a> 
           <ul class="nav nav-stacked"> 
            <li><a href="#GroupCSub1">Sub-Group 1</a></li> 
            <li><a href="#GroupCSub2">Sub-Group 2</a></li> 
           </ul> 
          </li> 
          <li><span>&nbsp</span></li> 
          <li> 
           <a class="back-to-top" href="#header">Back to top</a> 
          </li> 
         </ul> 
        </nav> 
       </div> 

Answer 1

Ich weiß nicht, wie dies geschieht .. aber nach einiger Zeit mit dem bootply spielen. Ich habe eine Lösung.

Ich denke, was es verursacht, ist die box-sizing:border-box bei .

Entweder ändern, oder überschreiben es box-sizing:content-box scheint dieses Problem zu beheben.

Wenn Sie eine benutzerdefinierte CSS-Datei haben, verwenden Sie die folgende Klasse, um den Bootstrap zu überschreiben.

* { 
    box-sizing:content-box; 
} 

this helps