11

我正在尝试使用图像和菜单链接下的引导菜单，当它滚动时，菜单会粘在窗口的顶部。

我发现了有趣的引导词缀，并使用了这个线程中的内容： bootstrap-affix：Div 下面的词缀“跳转”到顶部。如何让它平滑地向后滚动？

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

我已经为您写了一个小提琴来查看我的问题并尝试解决方案：http: //jsfiddle.net/mram888/WnPqF/

我试图为我的菜单 div 类设置不同的 z-index，但只有在页面滚动并且菜单贴在顶部时才能正常工作。

#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;
}

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

4

3 回答 3

9

您需要将 应用于z-indexnot #nav.nav-wrapper：

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

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

于 2013-01-16T12:56:17.330 回答
8

您的另一个变体：http: //jsfiddle.net/panchroma/6P5sF/

这里的行为与以前略有不同。导航栏在粘贴之前随页面滚动，当打开折叠菜单时，它会下推页面内容。

我删除了您的 javascript 并通过将以下内容添加到您的 nav-wrapper div 来 使用数据属性调用所有内容：

<div id="nav-wrapper" data-spy="affix" data-offset-top="100">

data-offset-top 是在粘贴菜单之前需要滚动的距离。

我还对你的 CSS 做了一个小改动：

#nav-wrapper.affix {
  top: 0;
  width: 100%
}

希望这可以帮助！

于 2013-01-16T13:46:47.093 回答
2

看来这可以通过替换您提供的 CSS 来实现

#nav {
    width: 100%;
    position:fixed;
}

#nav.affix {
    top: 0;
}

#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涵盖了两种情况#nav.affix和#nav.affix-top

看到这个 jsfiddle。

编辑：当#nav' 的位置被继承时，问题就出现了。如果您按照我的建议修复它，或者按照其他帖子的建议将其设置为relative，您的问题将得到解决。

于 2013-01-16T12:59:27.017 回答