1

由于这个非常有用的答案 - https://stackoverflow.com/a/10096021/2039935，我设法让 div 在到达页面顶部时更改为固定位置。

现在的问题是，当它变得固定时，它下面的内容显然会向上跳跃，因为 div 不再将其余内容向下推。我需要添加一个上边距，即 div 的高度到下面的内容，在它变为固定的点，所以下面的内容继续在固定的 div 下方平滑滚动..

到达页面顶部时将 div 更改为固定位置的代码是...

$(function(){
var stickerTop = parseInt($('#header-container').offset().top);
$(window).scroll(function() {
$("#header-container").css((parseInt($(window).scrollTop()) + parseInt($("#header-    container").css('margin-top')) > stickerTop) ? {
        position: 'fixed',
        top: '0px'
    } : {
        position: 'relative'
    }); 
});
});//]]>

对于熟悉的人来说应该很容易。。

非常感谢 ！

仅供参考，答案是......

$(function(){
    var stickerTop = parseInt($('#header-container').offset().top);
    $(window).scroll(function() {
        var movelisting = (parseInt($(window).scrollTop()) + parseInt($("#header-    container").css('margin-top')) > stickerTop) ? '200px' : '0px';
        $("#search-listings-container").css("marginTop", movelisting);

        $("#header-container").css((parseInt($(window).scrollTop()) + parseInt($("#header-container").css('margin-top')) > stickerTop) ? {
            position: 'fixed',
            top: '0px'
        } : {
            position: 'relative'
        }); 
    });
});
4

1 回答 1

0

我不确定是否了解您的问题。我看到你有一个 div 开始是 position: relative; 并固定结束。这会对下面的下一个 div 产生影响。$('#id_div').css({'margin-top':'40px'});在为#header-container 分配固定位置后，也许您可​​以尝试在此div 上放置一些margin-top 。

我放了 40px 但你必须放你相信的高度值。

于 2013-02-14T16:21:21.517 回答