Question

我有一个div，当页面滚动到它的高度时，它会固定在页面顶部。这个div有一个下拉列表，作为下面div的标记。

当从此下拉列表中选择div名称时，该div应向上滚动到固定div结束的位置。目前，它正在滚动到页面顶部。

您可以在此处查看问题http://jsfiddle.net/eranjali08/b7W95/

function ScrollToElement(element) {
    $('html,body').animate({
        scrollTop: $("#" + element).position().top
    }, 'slow');
}

Answer 1

从顶部位置减去固定的div高度，如下所示：

    function ScrollToElement(element) {
        $('html,body').animate({
            scrollTop: $("#" + element).position().top - $('#topContainer').height()
        }, 'slow');
    }

您还可以添加一个小填充：

    function ScrollToElement(element) {
        $('html,body').animate({
            scrollTop: $("#" + element).position().top - $('#topContainer').height() - 5
        }, 'slow');
    }

http://jsfiddle.net/jA4DS/3/

Answer 2

添加“fixToTop”类后，将从文档中删除元素的高度。如果在添加之前滚动开始，则滚动结束于错误的位置。

这可以通过在添加类时将原始高度添加到元素并在删除类时将其设置回0来避免。

function topContainer_relocate() {
    var window_top = $(window).scrollTop();
    if ($('#topContainer-anchor').offset()) {
        var div_top = $('#topContainer-anchor').offset().top;
        if (window_top > div_top) {
            $('#topContainerSpace').height($('#topContainer').height());
            $('#topContainer').addClass('fixToTop');
        } else {
            $('#topContainer').removeClass('fixToTop');
            $('#topContainerSpace').height(0);
        }
    } else {
        $('#topContainer').removeClass('fixToTop');
        $('#topContainerSpace').height(0);
    }
}

HTML

<div id="topContainerSpace"></div>
<div id="topContainer">

关于页面上的另一个div滚动div

2 个答案: