单页网站定位问题firefox和IE



我正在尝试设计一个单页滚动网站。网站有一个导航栏,当用户滚动它时,它的位置变得固定。问题是,当页面使用导航链接向下滚动到幻灯片时,在动画结束后,它会跳回到顶部,使幻灯片的margin-top为0。(不是整个网页)。这只发生在firefox和IE中,它在webkit浏览器上完美地工作。请帮我解决这个问题我的代码如下:

    <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');
    }
})
})

您正在设置导致页面在某些浏览器中跳转的window.location.hash。要防止这种情况发生,请在设置散列之后再次设置scrolltop。所以不是:

..., animationTime, function() {
    window.location.hash = $(sel).attr('href');
}...
你做了

..., animationTime, function() {
    window.location.hash = $(sel).attr('href');
    $('html,body').scrollTop(newTop-200);
}...

也可以看到这个更新的提琴:http://jsfiddle.net/pyUY7/6/

最新更新