通過導航向用戶滾動顯示部分

我有一個頁面，其中有很多部分顯示爲用戶滾動頁面。這是完整的工作代碼。通過導航向用戶滾動顯示部分

/** 
    * Reveal Sections as the users scrolls - Development Ongoing 
    * Get the nth div of class content, where n is the contentNumber, and make it shown 
    * Set intital divs to be hidden 
*/ 

$(".reveal").addClass("noshow"); 
var contentNumber = 0; 

function reveal() { 
    var constraintNumber = contentNumber + 2; 
    //IMPORTANT - DO NOT DELETE 
    $(window).trigger('resize'); 
    //IMPORTANT - DO NOT DELETE 
    for (i = contentNumber; i < constraintNumber; i++) { 
     //Get the nth div of class content, where n is the contentNumber, and make it shown 
     $('.reveal').eq(contentNumber).fadeIn('800'); 
     contentNumber ++; 
    } 

}

這些章節的display:none一個風格，那麼當用戶到達新出現的部分窗口的底部。

我是讓我的下拉導航向下滾動到某個部分（例如，「滾動到第6章」即使它是隱藏的）

這是我的滾動到我使用的代碼的問題：

$('#nav a').click(function() { 
    $('html, body').animate({ 
     scrollTop: ($(this.hash).offset().top - 17) 
    }, 1000, 

    function() {}); 
    return false; 
});

我有這樣的代碼在FIDDLE - http://jsfiddle.net/barrycorrigan/4Ur6R/3/

我只是在尋找一些幫助上獲得導航與顯示部分的工作。如果你點擊導航來滾動仍然顯示的部分。

任何幫助，非常感謝。

來源

2014-01-13 Barry Corrigan

導航僅在所有部分已加載到屏幕上時才起作用。 –

問題是，在'reveal'中你依靠隱藏的'div's的高度爲0，並且在你的'click'處理函數中，你依賴於它們的高度不爲0.你需要使用'visibility '和'顯示'CSS屬性一致（見我的答案）。 – Ziggy

我將繼續使用「'div's'」中的撇號。你依靠「div的品質」，這是div's擁有的。 – Ziggy

問題是，具有display:none的元素不會影響文檔高度。你在你的.scroll處理程序中使用這個，這非常棒！然而，在你的.click處理程序中，你試圖獲取沒有高度的元素的top。你需要做的是用在演唱會都visibility:hidden和display:none：

在你css，

.noshow { 
    display:none; 
    visibility: hidden; 
}

在你.click處理器，

// on click, add the element to the dom before calculating its height 
    // it will still be visually hidden, since it has both "display:none;" 
    // and "visibility:hidden" 
    $(this.hash).show(); 

    $('html, body').animate({ 
     scrollTop: ($(this.hash).offset().top - 17) 
    }, 1000, 

    function() {});

最後，在reveal功能，

var $reveal = $('.reveal').eq(contentNumber);      

// first change visibility to "visible", then fade it in 
$('.reveal').eq(contentNumber).css("visibility", "visible").fadeIn("800");

這是我的更改fiddle。

來源

2014-01-13 09:59:13 Ziggy

通過導航向用戶滾動顯示部分

回答

相關問題