当设置为导航栏固定顶部时,一页引导导航栏切换在移动模式下无法正常工作
Onepage bootstrap navbar toggle not working properly in mobile mode when set as navbar-fixed-top
我关注了一个制作单页网站的youtube视频。我遇到的一个问题是当设置导航条固定顶部时。在移动模式下,切换菜单下拉菜单位于内容顶部并覆盖它们,不会将内容向下推到导航栏下,也不会在选择一个菜单后向后折叠。除了我再次点击切换按钮外,它仍然在那里,并覆盖在内容的顶部。我试着删除导航条的固定顶部,然后在移动模式下,内容被向下推到下拉菜单下,但这不是我想要的。我检查了这个网站的答案,许多类似的问题,但我没有找到正确的答案。我尝试使用更新的jquery和javascript链接,但仍然无法使用。有人能看看出了什么问题吗?很多tks!
<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/
相关文章:
- 删除移动视图粘性js上的粘性导航栏
- 在下拉导航中将文本向左移动
- css,用于在移动视图中将引导导航栏更改为accordian
- 自动折叠移动设备上的OpenUI5侧边导航
- Bootstrap更改移动设备的导航栏高度
- 导航菜单不适合移动浏览器
- Angular UI&引导程序:点击链接时折叠移动导航栏
- 为什么我的导航按钮或按钮文本不会移动到中心
- 如何在页面之间导航后停止jquery移动中的重复数据
- 铬移动;导航.地理位置不起作用
- 移动导航菜单不起作用(HTML,CSS和JQuery)
- 显示移动窗口时引导导航栏中的 atach 搜索栏
- 折叠导航按钮不适用于twitter引导程序设计的移动设备
- Bootstrap 3.3-导航栏无法在移动设备上工作
- 我可以'我似乎没有得到我的网站'移动导航开始工作
- jQuery移动Ajax导航功能和CSS样式
- 移动徽标下方的主导航图标
- 使用jQuery移动ajax导航加载多页模板
- 如何仅在窗口宽度从桌面(>1024px)更改为移动(<1025px)导航时重新加载页面
- 实现画布外导航移动与桌面