停止网页页面跳转到顶部
Stop Web Page Page From Jumping To The Top
我正在尝试更新我的网站与粘性导航栏,如:
<div id ="navbar">
<ul class="nav navbar-nav nav-top"><!--Navigation Bar-->
<li class="navbar-brand">TechU</li>
<li><a href="index.aspx">About</a></li>
<li><a href="projects.aspx">Projects</a></li>
<li><a href="resume.aspx">Resume</a></li>
<li class="dropdown"><!--Start Dropdown-->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media
<span class="caret"></span>
</a>
<ul class="dropdown-menu"><!--Dropdown Menu-->
<li><a href="#">Facebook <img src="Media/Images/Icons/FaceBook.ico" /></a></li>
<li><a href="#">Twitter <img src="Media/Images/Icons/Twitter(1).ico" /></a></li>
<li><a href="#">WordPress <img src="Media/Images/Icons/Wordpress.ico" /></a></li>
<li><a href="#">Android Apps <img src="Media/Images/Icons/android.png" /></a></li>
<li><a href="#">YouTube <img src="Media/Images/Icons/Youtube.ico" /></a></li>
</ul><!--End Dropdown Menu-->
</li>
</ul><!--End Navigation Bar-->
</div>
这里是我使用的JavaScript:
var mn = $(".nav"),
hdr = $('#hero').height();
$(window).scroll(function () {
var scrollPos = $(this).scrollTop();
if (scrollPos >= hdr) {
mn.addClass('navbar-fixed-top');
mn.removeClass('nav-top');
} else {
mn.removeClass('navbar-fixed-top');
mn.addClass('nav-top');
}
});
我遇到的问题是,如果一个页面不够长,可以滚动,但页面的顶部击中导航条的顶部,那么页面将直接跳转回顶部。我的网址是TechUHost.com,所以你也可以自己去看看。
谢谢!
我建议不要使用bootstrap类,而是创建自己的类,这样可以使它看起来更流畅。像这样的css类
<div id="navSpy"></div>
<div id="nav" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button id="nav-button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar icon-bar-up"></span>
<span class="icon-bar icon-bar-middle"></span>
<span class="icon-bar icon-bar-down"></span>
</button>
<a class="navbar-brand" href="/">Deft</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li ><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
<li ><a href="/blog/">Blog</a></li>
</ul>
</div>
</div>
</div>
$(function () {
var e = $("#navSpy").offset().top;
var t = $(window).scrollTop();
$(window).resize(function () {
e = $("#navSpy").offset().top + 15;
t = $(window).scrollTop()
});
$(window).scroll(function () {
t = $(window).scrollTop();
if (e < t) {
$("#nav").addClass("navbar-sticky");
} else {
$("#nav").removeClass("navbar-sticky");
}
})
});
//CSS
.navbar-sticky {
position: fixed;
top: 0;
margin-top: 0;
}
您的代码实际上没有一个引导navbar
。根据bootstrap文档,
Be sure to use a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
有几种方法来实现粘着导航条。假设您不需要响应,我希望下面的代码对您有所帮助。
<body>
<div id="hero">
...
</div>
<nav id ="navbar" class="navbar navbar-default">
<a class="navbar-brand" href="#">TechU</a>
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Resume</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social Media
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">YouTube</a></li>
</ul>
</li>
</ul>
</nav>
...
...
</body>
对应的javascript是
var navbar = $("#navbar");
var heroHeight = $('#hero').height();
$(window).scroll(function () {
var scrolled = $(this).scrollTop();
if(scrolled >= heroHeight)
navbar.addClass('navbar-fixed-top');
else
navbar.removeClass('navbar-fixed-top');
});
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 如何防止网页加载后自动启动功能
- jQuery粘性插件可变顶部间距
- 如何使用Node.js最有效地解析网页
- 刷新后保留对网页的更改
- 使用jQuery更改元素的顶部位置
- 如何使一个元素从网页的顶部跳到底部再跳回到顶部
- 如何使父网页从 iframe 滚动到特定位置(顶部)
- 当导航栏放置在网页顶部时,如何修复导航栏
- 在Javascript确认对话框之后,网页将转到顶部.如何阻止这种情况
- 滚动到网页的顶部功能
- 函数的代码显示在网页的顶部
- HTML 5画布覆盖在网页的顶部
- 停止网页页面跳转到顶部
- 如何在调用JavaScript函数时阻止网页滚动到顶部?
- 保证始终在网页的顶部
- 在网页's内容顶部加载图像/视频
- 在我的网页顶部为首次访问者显示“网站导览”培训窗口
- 动态调整网页底部和顶部之间的元素的大小
- 如何检测到客户端已滚动到网页的顶部或底部