Question

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

目前我有这个，但页面的长度不一样，所以＆gt; = 17900对我来说不是一个好的解决方案。

$(window).scroll(function (event) {
    var windowTop = $(this).scrollTop();        
    if (windowTop >= 17900) {
        $(".product-form__item--quantity").addClass("non-fixed");
      	$(".product-form__item--submit").addClass("non-fixed");
      	$("#ProductPhotoImg").addClass("non-fixed");
      	$("#option_total").addClass("non-fixed");
      	$(".product-single__title").addClass("non-fixed");
      
      	$(".product-form__item--quantity").removeClass("change");
      	$(".product-form__item--submit").removeClass("change");
      	$("#ProductPhotoImg").removeClass("change");
      	$("#option_total").removeClass("change-option");
      	$(".product-single__title").removeClass("change");
      
    } else {
        //console.log('a');
        $(".product-form__item--quantity").removeClass("non-fixed");
      	$(".product-form__item--submit").removeClass("non-fixed");
      	$("#ProductPhotoImg").removeClass("non-fixed");
      	$("#option_total").removeClass("non-fixed");
      	$(".product-single__title").removeClass("non-fixed");
    }
});

感谢您的帮助

Answer 1

你遇到的问题不仅仅是在这里找到页脚的位置......

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

第二是您在滚动时不断添加和删除课程这肯定不是预期的效果。

scroll事件在单个鼠标滚轮旋转时会发射十几次或更多。

第三是你强制jQuery查找元素，正如@Taplar在评论中提到的那样，每次脚本执行时（如果脚本不断执行，这真的很糟糕!!）。这很糟糕......并且没有用，因为这些元素不会改变。

所以我修改了你的剧本...几乎完全：
）

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

阻止元素滚动页脚

1 个答案: