引导菜单顶部词缀 [英] bootstrap menu top affix

问题描述

我正在尝试在图像和菜单链接下创建一个引导菜单，该菜单在滚动时会停留在窗口顶部.

I'm trying to do a bootstrap menu with an image and under the menu links, that when it's scrolled the menu sticks on the top of the window.

我找到了有趣的自举词缀，并使用了该线程中的内容: bootstrap-affix: div后面加上"jumps"到达顶点.如何使其平滑地向后滚动?

I've found interesting bootstrap affix and have used what's in this thread: bootstrap-affix : Div underneath affix "jumps" to top. How do I make it smoothly scroll behind?

问题在于，当我按下菜单按钮时，选项位于页面的内容文本下方.

The problem is that when I press the menu's button the options are under the content text of the page.

我为您写了一个小提琴，以查看我的问题并尝试解决方法: http://jsfiddle.net/mram888/WnPqF/

I've written a fiddle for you to see my problem and try a solution: http://jsfiddle.net/mram888/WnPqF/

我曾尝试为菜单div的类设置不同的z-index，但仅在滚动页面并将菜单粘贴在顶部时才能正常工作.

I've tried to put different z-index for the class of my menu divs, but only works properly when the page is scrolled and the menu is affixed on the top.

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:2;
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

.nav-wrapper {
    z-index: 2;
}

推荐答案

您需要将z-index应用于#nav而不是.nav-wrapper:

You need to apply the z-index to the #nav not the .nav-wrapper:

#nav { 
  position: relative;
  z-index: 2; 
}

演示: http://jsfiddle.net/t7pL3/

这篇关于引导菜单顶部词缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！