Question

我有一个固定的标题，并且当有人向下滚动到该元素时，想要在标题下面添加一个额外的固定元素。我已经设法变得非常接近它，除非我滚动时新的固定元素跳了一下，我无法理解为什么。

$(window).scroll(function() {
    height2 = $('#product_nav_cont').offset().top;
    scroll2 = $(this).scrollTop();
    header2 = $('#scroll_header_cont').outerHeight();
    pos2 = height2-header2

    if(scroll2 > pos2) {
        $('#product_nav_cont').css({'position':'fixed','top':header2,'width':'100%'});
    } else {
        $('#product_nav_cont').css({'position':'static','top':'0'});
    }
});

我认为它可能与变量“height2”有关，也许这个位置在滚动时会因为在向下滚动页面时固定元素而改变，但我无法弄明白，如果这甚至是问题。任何想法都非常赞赏。

您可以在http://jsfiddle.net/LbpkLko8/1/

查看问题

Answer 1

您应该将变量 header2 和 height2 放在滚动函数之外。这是您的updated fiddle和新代码：

header2 = $('#scroll_header_cont').outerHeight();
height2 = $('#product_nav_cont').offset().top;

$(window).scroll(function() {
    scroll2 = $(this).scrollTop();
    pos2 = height2-header2

    if(scroll2 > pos2) {
        $('#product_nav_cont').css({'position':'fixed','top':header2,'width':'100%'});
    } else {
        $('#product_nav_cont').css({'position':'static','top':'0'});
    }
});

从滚动的任意位置创建固定位置元素

1 个答案: