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

Question

当我向下滚动网站显示时,顶部的黑色菜单栏看起来像浮动条.但我认为这涉及到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可以帮助你。

查看引导程序中的导航栏并搜索“固定到顶部”

编辑：如果您想要像您发布的内容，请与类似的内容结合起来，滚动时将菜单栏固定在顶部。

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