我有一個 jquery 代碼，它使現有元素跟隨用戶的滾動。我希望它在達到某個元素時停止#header-line，但它并不一致。在某些 PDP 上，它會滾動并停在那里，而在其他 PDP 上，它會滾動到該行之外。
頁面：https ://www.norli.no/to-pappaer （此處未激活代碼）
jQuery
require(['jquery'], function($){
$(document).ready(function() {
(function($) {
var element = $('.product-add-form'),
originalY = element.offset().top;
var hr = $('#header-line > hr');
topOfLine = hr.offset().top;
var topMargin = 250;
element.css('position', 'relative');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
var nextPosition = scrollTop - originalY topMargin;
var maxPositionAllowed = topOfLine - 1000;
element.stop(false, false).animate({
top: scrollTop 250 < originalY ? 0 : Math.min(nextPosition, maxPositionAllowed )
}, 0);
});
})(jQuery);
});
});
uj5u.com熱心網友回復：
如果您能夠position: sticky確保粘性元素的所有父元素都具有overflow: visible
在您發布的那個鏈接中，如果您想.product-add-form成為position: sticky您必須確保.off-canvas-wrapper已overflow: hidden更改為overflow: visible.
我為您共享的那個頁面制作了一個示例小提琴，因此您可以看到使該側面表格具有粘性是多么容易。
https://jsfiddle.net/treckstar/d30phae8/8/
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/465568.html
標籤：javascript html jQuery css