从页脚滚动停止元素
所以我试图让这个元素滚动它,但我希望它在页脚之前停止滚动。从页脚滚动停止元素
目前我有这个,但页面没有相同的长度,所以> = 17900对我来说不是一个好的解决方案。
$(window).scroll(function (event) {
var windowTop = $(this).scrollTop();
if (windowTop >= 17900) {
$(".product-form__item--quantity").addClass("non-fixed");
\t $(".product-form__item--submit").addClass("non-fixed");
\t $("#ProductPhotoImg").addClass("non-fixed");
\t $("#option_total").addClass("non-fixed");
\t $(".product-single__title").addClass("non-fixed");
\t $(".product-form__item--quantity").removeClass("change");
\t $(".product-form__item--submit").removeClass("change");
\t $("#ProductPhotoImg").removeClass("change");
\t $("#option_total").removeClass("change-option");
\t $(".product-single__title").removeClass("change");
} else {
//console.log('a');
$(".product-form__item--quantity").removeClass("non-fixed");
\t $(".product-form__item--submit").removeClass("non-fixed");
\t $("#ProductPhotoImg").removeClass("non-fixed");
\t $("#option_total").removeClass("non-fixed");
\t $(".product-single__title").removeClass("non-fixed");
}
});
感谢您的帮助
您有更多的问题,不是只在这里找到了注脚的位置...
首先是找到页脚的位置而不是硬编码一个值。
好的......
第二个是你不断添加和删除滚动类。
这肯定不是预期的效果。
scroll
事件在单个鼠标滚轮上闪烁十次或更多次。
三是你逼的jQuery查找的元素,@Taplar在评论mentionned,脚本执行各次(这是真正的坏,如果脚本执行不断!!)。这是不好的...而且没有用,因为这些元素不会改变。
所以我修改你的脚本......几乎完全:
)
// Define an element collection ONCE.
var elementsList = $(".product-form__item--quantity, .product-form__item--submit, #ProductPhotoImg, #option_total, .product-single__title");
// Find the footer's position.
var footerPosition = $("#footer").offset().top;
// Set a flag to prevent the the script action when already done.
var footerVisible = false;
$(window).scroll(function (event) {
// How many pixels scrolled + viewport height = position of the last pixel at the bottom of the viewport relative to the document's top.
var viewportBottom = $(this).scrollTop() + $(window).height();
if (viewportBottom >= footerPosition) {
if(!footerVisible){
// Will update classes on the element in the elementslist collection on user scroll enought to show the footer in viewport.
elementsList.addClass("non-fixed").removeClass("change change-option");
// Set a flag
footerVisible = true;
}
} else {
if(footerVisible){
// Will update classes on the element in the elementslist collection on user scroll from a "visible footer" to a footer below the viewport.
// In other words, You don't want to do it CONSTANTLY except when the footer is visible and dissapears due to user scroll up.
elementsList.removeClass("non-fixed");
// reset the flag.
footerVisible = false;
}
}
});
非常感谢那个家伙!虽然这使得它更顺畅,这很好,但它仍然通过页脚。我在shopify中使用这个脚本,所以我不确定它是否有所作用... – Smokersky
在这个脚本中,我使用了'#footer'作为它的选择器。这可能不正确。你必须找到合适的选择器。使用代码检查器。然后按[F12](在铬中)[ctrl] + [shift] + [c]选择一个元素。将鼠标悬停在页脚上...您会看到它是类或ID。 –
你需要修复的片段 –
哦伙计,侧跨您的问题了一会儿。你真的需要尽量不要在滚动处理程序中做很多查找,这会导致大量的火灾。 – Taplar