Question

我有一个单独的页面，其中有许多部分在用户滚动页面时显示。这是完全有效的代码。

/**
    * 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/

我正在寻找一些帮助，让导航与揭示部分一起使用。如果您单击导航以滚动仍然显示的部分。

非常感谢任何帮助。

Answer 1

问题是，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我的更改。

通过导航向用户滚动显示部分

1 个答案: