Question

Here is my fiddle:

jQuery(document).ready(function(){
    $('ul.subMenu li a').click(function(){
        jQuery('ul.subMenu li a.curM').removeClass('curM');
        jQuery(this).addClass('curM');

        var target = $(this).attr('href');

        var getHeaderHeight = jQuery(".header_wrap.fixed_nav_menu").outerHeight();
        $('html, body').stop().animate({'scrollTop': $(target).offset().top - getHeaderHeight}, 'fast', 'swing'); 


    });

    jQuery(window).scroll(function() {                
        jQuery('.header_wrap').addClass('fixed_nav_menu');
        if (jQuery(document).scrollTop() == 0) {
            jQuery('.header_wrap').removeClass('fixed_nav_menu');   
        }
    });

});

首先，当您单击“团队”时，它不会滚动到相应的部分，但是当您第二次单击时，它会滚动到相应的部分。

Answer 1

使用它。 http://jsfiddle.net/sherali/NXzcx/204/

已编辑：代码已优化。

每次在代码中定义一些值。这不是最佳方式。

//you should define first time
var headerWrap = jQuery(".header_wrap"),
    getHeaderHeight = jQuery(".header_wrap").outerHeight(),
    fixedNavMenu = "fixed_nav_menu";


$('ul.subMenu li a').click(function () {
    jQuery(this).addClass('curM')
        .parent().siblings()
        .children().removeClass('curM');

    var target = $(this).attr('href'),
        offsetTop = $(target).offset().top - (headerWrap.is('.' + fixedNavMenu) ? getHeaderHeight : 2 * getHeaderHeight);

    $('html, body')
        .stop()
        .animate({'scrollTop': offsetTop}, 'fast', 'swing');
});

jQuery(window).scroll(function () {
    headerWrap.addClass(fixedNavMenu);
    if (jQuery(document).scrollTop() == 0) {
        headerWrap.removeClass(fixedNavMenu);
    }
});

Answer 2

它当前不起作用，因为当您添加fixed_nav_menu类时，它会导致其他内容粘在顶部，使$(target).offset.top按标题的高度关闭。发生这种情况是因为您在计算目标后发生的滚动中添加了类，导致目标对于页面的当前状态不准确。通过将计算更改为$(target).offset().top - getHeaderHeight - (getHeaderHeight * !$(".header_wrap").hasClass("fixed_nav_menu"))，您可以在计算和调整之前检查该类是否存在。

此外，在计算getHeaderHeight时，使用返回null的选择器jQuery(".header_wrap.fixed_nav_menu")。这是因为当您滚动到顶部时，header_wrap没有类fixed_nav_menu，因此选择器将不返回任何内容。要解决此问题，请从选择器中移除.fixed_nav_menu，从而导致jQuery(".header_wrap").height()在所有情况下获得标题的高度。

请参阅http://jsfiddle.net/ocahtdgv/1/

Answer 3

你能编辑HTML吗？如果是这样，我建议只需保持标题固定，并在页面顶部添加一个spacer div，重叠菜单。这将大大简化事情。

看到这个小提琴：http://jsfiddle.net/1c4h8bmp/

如您所见，我在HTML的开头添加了以下内容：

<div class="spacer"></div>

除了将.fixed_nav_menu类添加到header_wrap div。

之外

虽然其他答案有效，但我认为这是最简单的方法。

Answer 4

DEMO

您的功能中的一些细微变化可以解决它。

添加以下内容。

var getHeaderHeight = jQuery(".header_wrap").outerHeight();
if(jQuery(".header_wrap").hasClass('fixed_nav_menu'))
    var scrollTo = $(target).offset().top - getHeaderHeight;
else
    var scrollTo = $(target).offset().top - (getHeaderHeight * 2);
console.log($(target).offset().top +  ' - ' + getHeaderHeight);
$('html, body').stop().animate({
    'scrollTop': scrollTo
}, 'fast', 'swing');

动画滚动第一次无法正常工作

4 个答案: