从页脚滚动停止元素

Question

所以我试图让这个元素滚动它，但我希望它在页脚之前停止滚动。

目前我有这个，但页面没有相同的长度，所以> = 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"); 
 
    } 
 
});

感谢您的帮助

Answer 1

您有更多的问题，不是只在这里找到了注脚的位置...

首先是找到页脚的位置而不是硬编码一个值。
好的......

第二个是你不断添加和删除滚动类。
这肯定不是预期的效果。

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; 
     } 
    } 
});