[英]Weird scrollTop function behavior - JQuery
I'm trying to change the css position from fixed to static and viceversa, based on pixel scrolled... The script works fine as espected, but at the point to change css position, there is a sort of lag.
如果我緩慢滾動到切換點，從控制台我看到 position 從固定快速切換到 static 和從 static 快速切換到固定。
無論如何，看看片段，滾動到最后，看看會發生什么......我無法弄清楚原因。 希望得到您的幫助！ 謝謝！
以全屏模式打開剪輯以查看更好的內容！
$(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>
您面臨的問題是：您計算滾動 position 每次更改的total 。 因此，當您滾動並將元素的 position 從fixed更改為static時，您會將height （60px）添加到total 。 （如果您使用console.log(scrolled, total)這是可見的）。 因為fixed的 position 元素不占用任何空間。
最簡單的解決方法是在頁面加載時計算total 。 然后，如果它沒有改變，那么你永遠對那個高度的 go 很好。 因此，我對您的代碼所做的唯一更改是將total的計算移到滾動 function 之外。
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
});
JavaScript（使用jQuery）'scrollTop'在Android WebView上的怪異行為
[英]Weird behavior of JavaScript (With jQuery) 'scrollTop' on Android WebView
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.