向下滚动时如何构建浮动菜单栏

当我向下滚动网站显示时，顶部的黑色菜单栏看起来像浮动条。 但我认为这涉及到jquery。 我试过CSS，但似乎不像我想要的那样为我工作

#menucontainer { position:fixed; top:0; height: 250px } #firstElement { margin-top: 250px } 

这是我想要菜单的网站基本概念：

http://avathemes.com/WP/Hexic/

Answer 1

将您的菜单包含在带有ID或类的div或部分中。

 #yourID.fixed { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; border-bottom: 5px solid #ffffff; } //STICKY NAV $(document).ready(function () { var top = $('#yourID').offset().top - parseFloat($('#yourID').css('marginTop').replace(/auto/, 100)); $(window).scroll(function (event) { // what the y position of the scroll is var y = $(this).scrollTop(); // whether that's below the form if (y >= top) { // if so, ad the fixed class $('#yourID').addClass('fixed'); } else { // otherwise remove it $('#yourID').removeClass('fixed'); } }); }); 

不记得我从哪里得到这个，所以没有向我致敬，但它对我有用。

Answer 2

我认为使用Twitter Bootstrap可以帮助你。

在bootstrap中查看Navbar并搜索“Fixed to top”

编辑：如果你想要像你发布的东西，结合这样的东西滚动时 ，将菜单栏固定在顶部 。

当菜单顶部偏移等于添加类“.navbar-fixed-top”时。

Answer 3

试试这个

CSS

 * {margin: 0; padding: 0; outline: 0;} body { font-family: Helvetica, Arial, Verdana, sans-serif; color: #999; font-size: 12px; background:#bfbfbf; } h1, h2 { font-family: 'Open Sans', sans-serif; font-weight: 300; margin:0 0 15px 0; } h1 { font-size: 36px; letter-spacing: -2px; line-height: 100%; } h1.title { font-size: 46px; font-weight: 700; color: #6a6a6a; } h2 { font-size: 24px; } p { margin: 0 0 15px 0; } .menuBtn { background: center center no-repeat transparent; background: #000; display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 10px; } .clear { clear: both; } .wrap { /*background:url(../images/bg.png) top left repeat-x;*/ width: 100%; max-width: 1140px; min-width: 960px; z-index: 10; position: relative; margin: 0 auto; padding: 0; } .section { width: 100%; max-width: 1140px; min-width: 960px; z-index: 10; position: relative; margin: 0 auto; padding: 0 0 20px 0; } .inner { width: 960px; margin: 0 auto; position: relative; min-height: 50px; padding:30px 0; font-size: 18px; font-family: 'Open Sans', sans-serif; font-weight: 300; padding:30px 0; } /* This is the selector i used for my menu, it needs to be set as position:absolute; */ .subMenu { position: absolute; top: 462px; height: 50px; z-index: 1000; width: 100%; max-width: 1140px; min-width: 960px; background: #aabd46; } .subMenu .inner { padding:0; font-weight: 400; } .subNavBtn { display: block; height: 35px; width: 12%; float: left; margin: 0px 0px 0 0; text-decoration: none; font-size: 14px; padding: 15px 2% 0 2%; text-align: center; color: #fff; } .end { margin: 0; } /* SECTIONS */ .sTop { min-height: 630px; background:#e5e5e5; color:#3d3d3d; } .s1 { min-height: 500px; background: #2e2e2e; } .s2 { min-height: 500px; background: #3f3f3f; } .s3 { min-height: 500px; background: #504f4f; } .s4 { min-height: 500px; background: #6e87a1; color: white; } .s5 { min-height: 500px; background: #293b4d; color: white; } 

---

JavaScript的

：

  (function(){ $.fn.smint = function( options ) { // adding a class to users div $(this).addClass('smint') var settings = $.extend({ 'scrollSpeed ' : 500 }, options); return $('.smint a').each( function() { if ( settings.scrollSpeed ) { var scrollSpeed = settings.scrollSpeed } /////////////////////////////////// // get initial top offset for the menu var stickyTop = $('.smint').offset().top; // check position and make sticky if needed var stickyMenu = function(){ // current distance top var scrollTop = $(window).scrollTop(); // if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class if (scrollTop > stickyTop) { $('.smint').css({ 'position': 'fixed', 'top':0 }).addClass('fxd'); } else { $('.smint').css({ 'position': 'absolute', 'top':stickyTop }).removeClass('fxd'); } }; // run function stickyMenu(); // run function every time you scroll $(window).scroll(function() { stickyMenu(); }); /////////////////////////////////////// $(this).on('click', function(e){ // gets the height of the users div. This is used for off-setting the scroll so th emenu doesnt overlap any content in the div they jst scrolled to var selectorHeight = $('.smint').height(); // stops empty hrefs making the page jump when clicked e.preventDefault(); // get id pf the button you just clicked var id = $(this).attr('id'); // gets the distance from top of the div class that matches your button id minus the height of the nav menu. This means the nav wont initially overlap the content. var goTo = $('div.'+ id).offset().top -selectorHeight; // Scroll the page to the desired position! $("html, body").animate({ scrollTop: goTo }, scrollSpeed); }); }); } })(); 

---

HTML

               
 
 
 Home About me   Portfolio Working Hello lets go 
 
 
 
 
Welcome to my site 
 
Click the links below !
 
 
 
 
 
 
About me 
 
 
 
 
 
Portfolio
 
 
 
 
 
Working Standards
 
 
 
 
 
Hello
 
 
 
 
 
Lets Go
 
 
 
   

Answer 4

我尝试了多次解决@Kortschot提供的解决方案，最后结果certificate这个解决方案不适合我的情况。

使用@Kortschot提供的解决方案时，我的问题是：

• 当浮动条状态在修复或不修复之间发生变化时，浮动条的宽度无法维持
• 我希望所有过程都可以在一个脚本中完成 ，而提供的解决方案@Kortschot不适合。

这是我的解决方案，可以在一个脚本中完成所有工作 （使用1.7+ jquery）：

Answer 5

在您提供的URL中，当您向下滚动页面的几行时，我会在浏览器顶部看到一个菜单栏。

因此，我将您的问题分为两个问题：首先，如何制作一个固定的顶级菜单，滚动页面时不会消失。 其次，如何在向下滚动几行后将菜单固定在顶部。

对于第一个问题，我更改了您的css代码。

 #menucontainer { float:top; position:fixed; top:0; height: 100px; width: 100%; background-color: eeee00; /* makes other content won't be seen when the page scrolling */ } 

我认为第二个问题需要写js。 嗯，我还不知道。