我正在尝试设计单页滚动网站。该网站有一个导航栏,当用户滚动它时,该导航栏的位置变得固定。问题是,当页面使用导航链接向下滚动到幻灯片时,在动画之后它会跳回顶部以使幻灯片顶部边缘为 0。(不是整个网页。向下滚动到的幻灯片) 这个仅在 Firefox 和 IE 中发生,它在 webkit 浏览器上完美运行。请帮我解决这个问题我的代码如下。
html
<div class="wrapper">
<nav class="mnav">
<ul>
<li><a href="#slide1">home</a></li>
</ul>
<ul>
<li><a href="#slide2">home</a></li>
</ul>
<ul>
<li><a href="#slide3">home</a></li>
</ul>
</nav>
<div id="slide1" class="slide"></div>
<div id="slide2" class="slide"></div>
<div id="slide3" class="slide"></div>
</div>
css
.slide {
height: 800px;
}
#slide1 {
background: red;
}
#slide2 {
background: orange;
}
#slide3 {
background: green;
}
.mnav li {
display: inline;
float: left;
background: #fff;
}
.fixed {
position: fixed;
top: 0;
}
.fixed nav ul li {
display: inline;
float: left;
background: #fff;
}
用于滚动的 JQUERY
$('document').ready(function() {
var topRange = 350, // measure from the top of the viewport to X pixels down
edgeMargin = 280, // margin above the top or margin from the end of the page
animationTime = 4000, // time in milliseconds
contentTop = [];
$(document).ready(function() {
// Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e) {
if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
$('html,body').stop();
}
})
// Set up content an array of locations
$('nav').find('a').each(function() {
contentTop.push($($(this).attr('href')).offset().top);
})
// Animate menu scroll to content
$('nav').find('a').click(function() {
var sel = this, newTop = Math.min(contentTop[ $('nav a').index($(this))], $(document).height() - $(window).height());
// get content top or top position if at the document bottom
$('html,body').stop().animate({
'scrollTop' : newTop- 400
}, animationTime, "easeInOutQuint",function() {
window.location.hash = $(sel).attr('href');
});
return false;
})
// adjust menu
$(window).scroll(function() {
var winTop = $(window).scrollTop(), bodyHt = $(document).height(), vpHt = $(window).height() + edgeMargin;
// viewport height + margin
$.each(contentTop, function(i, loc) {
if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt ) >= bodyHt ) )) {
$('nav a').removeClass('selected').eq(i).addClass('selected');
}
})
})
})
});
我用来固定导航的jquery
$(document).ready(function() {
$(window).scroll(function() {
var scrollTop = 80;
if ($(window).scrollTop() >= scrollTop) {
$('nav').addClass('fixed');
}
if ($(window).scrollTop() < scrollTop) {
$('nav').removeClass('fixed');
}
})
})