在滚动div后，如何将引导导航栏固定到顶部？

我试图让带有引导程序的导航栏出现在某个div之后，称为“A”。 Div“a”位于页面顶部，高度约为400px。 一旦用户滚过div“a”和滚动条，我希望滚动条粘在顶部。 类似于这样的事情： https ： //www.facebook.com/home但我顶部没有video，它是一个图像。

我们可以这样做，我们自己引导吗？

谢谢！

Answer 1

我为此做了一个jQuery插件 – http://drewdahlman.github.com/Pinned/

超级简单 – 只需使你的标题位置绝对并定位它 – 然后设置jQuery插件 –

$("#element").pinned({ bounds: 100, // when to become sticky 100px scrolling: 0, // position during scroll 0px }); 

应该这样做！

干杯!

Answer 2

如果您想使用Twitter的Bootstrap来实现这一点，请查看’Affix’js。 您可以使用“data-offset-top”定义“固定”点，然后当用户向下滚动时，导航栏将固定在顶部。

CSS：

 #con .well { height:390px; } #nav.affix { position: fixed; top: 0; width: 100% } 

HTML：

 
 
 
 ... 

使用Javascript：

 $('#nav').affix(); 

这是工作小提琴： http ： //jsfiddle.net/skelly/df8tb/

这是一个工作示例（针对Bootstrap 3更新）： http ： //bootply.com/90936

Answer 3

要在facebook.com/home上显示效果，您的导航栏位置应设置为静态（或相对/绝对），直到用户滚动超过400px，然后您需要将其位置设置为固定，以便保持在顶部屏幕。 这可以通过一点点javascript来完成。

Answer 4

请按照这个。 当菜单栏到达顶部位置时，您将看不到快照的东西。

             
 
Scrollspy & Affix Example
 
Fixed navbar on scroll
 
Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".
 
The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.
 
 
 
 
      WebSiteName 
 
 
 
 
Section 1
 
Section 2
 
Section 3
 
Section 4  
 
Section 4-1
 
Section 4-2
 
 
 
 
 
 
 
 
 
Section 1
 
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
 
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
 
 
 
Section 2
 
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
 
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
 
 
 
Section 3
 
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
 
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
 
 
 
Section 4 Submenu 1
 
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
 
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
 
 
 
Section 4 Submenu 2
 
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
 
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
 
   

---

参考： https ： //www.w3schools.com/bootstrap/tryit.asp？filename = trybs_scrollspy_affix＆stacked = h