動畫滾動在第一時間不起作用

Question

這是我的小提琴：

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類時，它會使其他內容fixed_nav_menu在頂部，從而使$(target).offset.top偏離標題的高度。 發生這種情況是因為您在滾動中添加了類，該類在計算出目標之后發生，從而導致目標對於頁面的當前狀態而言是不准確的。 通過將計算更改為$(target).offset().top - getHeaderHeight - (getHeaderHeight * !$(".header_wrap").hasClass("fixed_nav_menu")) ，可以在計算和檢查類之前檢查是否存在該類。相應地容納。

另外，在計算getHeaderHeight ，請使用選擇器jQuery(".header_wrap.fixed_nav_menu") ，該選擇器將返回null。 這是因為當您滾動到頂部時， header_wrap沒有類fixed_nav_menu因此選擇器將不返回任何內容。 要解決此問題， .fixed_nav_menu從選擇器中刪除.fixed_nav_menu ，得到jQuery(".header_wrap").height()以在所有情況下獲取標頭的高度。

參見http://jsfiddle.net/ocahtdgv/1/

Answer 3

您可以編輯HTML嗎？ 如果是這樣，我建議您只保留標題固定，並在頁面頂部添加一個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');