Question

我正在尝试根据滚动的像素将 css 位置从固定更改为静态，反之亦然... 该脚本按预期工作正常，但在更改 css 位置时，存在某种滞后。

如果我缓慢滚动到切换点，从控制台我会看到位置快速从固定切换到静态和从静态切换到固定。

无论如何，查看代码片段，滚动到末尾，看看会发生什么......我无法找出原因。希望得到您的帮助！谢谢！

以全屏方式打开剪下的片段以获得更好的效果！

$(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    var add_px = $('body').height();
    var px_scroll = scrolled + add_px;
    
    var tot = $(document).height();
    var ftr = $('#footer').css("margin-bottom");
    ftr = ftr.replace('px','');
    ftr = ftr.replace('-','');
    var total = tot - ftr;
    
    if ( px_scroll > total ) {
        $('#act_btns').css({'position':'static'});
    } else {
        $('#act_btns').css({'position':'fixed'});
    }
});

html, body { height: 100%; margin:0; padding: 0; }

#main_container {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
    text-align: center;
}

#act_btns {
    position: fixed;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 50px;
}
#act_btns input {
    color: #fff;
    border: 0px;
    width: 100px;
    height: 40px;
    margin: 0 5px;
    box-shadow: 0 0 5px 5px #000;
}

#footer {
    position: absolute;
    bottom: 0;
    margin-bottom: -200px;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 7px 15px 7px;
    box-sizing: border-box;
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<html>
<body>
<div id="main_container">

<div style="position:relative;margin:0 auto 20px;width:80%;height:2500px;background:#ccc;"></div>

<div id="act_btns">
<input type="submit" name="save_list" id="save_btn" value="Salva">
<input type="submit" name="reset_list" id="rst_btn" value="Reset">
</div>

<div id="footer"><p id="copyright">Copyright © 2016 - 2021</p></div>

</div>
</body>
</html>

Answer 1

您面临的问题是：您在每次更改滚动位置时计算 total 值。因此，当您滚动并将元素的位置从 fixed 更改为 static 时，您会将 height (60px) 添加到 total。（如果您console.log(scrolled, total)，这是可见的）。因为 fixed 位置元素不占用任何空间。

最简单的解决方法是在页面加载时计算 total。然后，如果它没有改变，你就可以永远保持那个高度。因此，我对您的代码所做的唯一更改是将 total 的计算移到滚动函数之外。

var tot = $(document).height();
var ftr = $('#footer').css("margin-bottom");
ftr = ftr.replace('px','');
ftr = ftr.replace('-','');
var total = tot - ftr;


$(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    var add_px = $('body').height();
    var px_scroll = scrolled + add_px;
    
    if ( px_scroll > total ) {
        $('#act_btns').css({'position':'static'});
    } else {
        $('#act_btns').css({'position':'fixed'});
    }
});

html, body { height: 100%; margin:0; padding: 0; }

#main_container {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
    text-align: center;
}

#act_btns {
    position: fixed;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 50px;
}
#act_btns input {
    color: #fff;
    border: 0px;
    width: 100px;
    height: 40px;
    margin: 0 5px;
    box-shadow: 0 0 5px 5px #000;
}

#footer {
    position: absolute;
    bottom: 0;
    margin-bottom: -200px;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 7px 15px 7px;
    box-sizing: border-box;
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<html>
<body>
<div id="main_container">

<div style="position:relative;margin:0 auto 20px;width:80%;height:2500px;background:#ccc;"></div>

<div id="act_btns">
<input type="submit" name="save_list" id="save_btn" value="Salva">
<input type="submit" name="reset_list" id="rst_btn" value="Reset">
</div>

<div id="footer"><p id="copyright">Copyright © 2016 - 2021 VirtualCode.Net</p></div>

</div>
</body>
</html>

如果您正在加载图像，这可能会导致一些问题，而在完全加载且计算已经发生时可能会占用更多空间（高度）的内容。永远不要面对这个问题，你可以将计算包装在里面

$(window).load(function(){
    // add total calculation code here
});

奇怪的 scrollTop 函数行为 - JQuery

1 个答案: