Bootstrap 3奇怪的粘贴问题(Bootstrap 3 weird affix issue on chrome)

所以我试图使用引导附加功能，但它奇怪。当您尝试向下滚动标题部分时，它会自动转到顶部。当屏幕宽度低于1100px时会发生这种情况。当您使用滚动条进行滚动时，它也仅限于Chrome浏览器。我有一个bootply安装程序来演示发生了什么。那么，任何人都可以帮我弄清楚发生了什么？

观看此视频可能会有所帮助。

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>

So I am trying to use the bootstrap affix feature but it acts weird. When you try to scroll down past the header section it automatically goes to the top. This happens when the screen width is below 1100px. Also its only on Chrome when you scroll with the scroll bar. I have a bootply setup to demonstrate whats happening. So can anybody please help me figure out whats going on?

Watching this video might help.

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>