我按照 YouTube 视频制作了一个单页网站。我遇到的一个问题是设置导航栏固定顶部时。在移动模式下，切换菜单下拉菜单位于内容顶部并覆盖它们，这不会将内容推到导航栏下方或在选择一个菜单后折叠回来。它保留在那里并覆盖在内容之上，除非我再次单击切换按钮。我尝试删除导航栏固定顶部，然后在移动模式下，内容被推到下拉菜单下，但这不是我想要的。我检查了这个网站的答案，有很多类似的问题，但我没有找到正确的答案。我尝试使用更新的 jquery 和 javacript 链接，但仍然不起作用。有人可以看一下问题出在哪里吗？非常感谢!
<body data-spy="scroll" data-target="#my-navbar">
[enter image description here][1]<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href=" " class="navbar-brand">Myapp</a>
</div><!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<a href="" class="btn btn-warning navbar-btn navbar-
right">Download Now</a>
<ul class="nav navbar-nav">
<li><a href="#feedback">Feedback</a>
<li><a href="#gallery">Gallery</a>
<li><a href="#features">Features</a>
<li><a href="#faq">Faq</a>
<li><a href="#contact">Contact Us</a>
</ul>
</div>
</div><!--End Container-->
</nav><!--End navbar-->
对于整个页面的代码，以下是链接: http://codepen.io/anon/pen/bEGzpo
最佳答案
使用下面给出的代码它会以动画滚动 -
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 70
}, 900, 'swing', function () {
window.location.hash = target;
});
});
下面的代码帮助自动关闭移动设备中的汉堡菜单 -
//Hamburger menu toggle
$(".navbar-nav li a").click(function (event) {
// check if window is small enough so dropdown is created
var toggle = $(".navbar-toggle").is(":visible");
if (toggle) {
$(".navbar-collapse").collapse('hide');
}
});
这在 http://hardcoredevs.com/ 中工作正常
关于javascript - 设置为 navbar-fixed-top 时，单页 Bootstrap 导航栏切换在移动模式下无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34115935/