Question

我需要一个脚本，当另一个类或部分在视口中可见时（在滚动期间）切换一个类。

这里我有一个脚本适用于从顶部开始的精确距离，但有人可以帮我修改它以满足我的需求吗？

{{1}}

Answer 1

<强> Working fiddle

尝试添加检测参数中传递的元素是否可见的函数：

function isVisisble(elem){
    return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}

$(window).scroll(function(){
   if (isVisisble( $('your_element') ))
      $('#viewport').addClass('turn_on');
   } else {
      $('#viewport').removeClass('turn_on');
   }
});

希望这有帮助。

Answer 2

有几件事。首先滚动事件（以及resize事件）多次触发。传统上，开发人员使用名为debouncing的东西来限制函数触发的次数。我从来没有让它正常工作，所以我会在继续之前检查是否满足条件。你基本上已经这样做了。

var bool = false
$(window).on('scroll', function(){
   if(!bool){
      bool = true;
      //fire the function and then turn bool back to false.
   };
});

您需要的下一件事是确定要添加类的元素。我们假设它的ID为foo。

var yOffset = $('#foo').offset().top;

从这里开始，您需要将当前垂直滚动位置与yOffset的垂直滚动位置进行比较。您可能还需要在元素滚出框架时添加元素的高度。

var elHeight = $('#foo').height();

当$(window).scrollTop()大于yOffset时，该元素应该与$(window).scrollTop()等于yOffset + elHeight完全一致，并在帧外。

这一切都假设元素不在框架中开始。如果是的话，那将会更加棘手，但这只是一个开始。

Answer 3

请大家帮忙。在这里，我找到了解决方案：LINK

以下是修改过的脚本：

$(document).ready(function () {
    var windowHeight = $(window).height(),
        gridTop = windowHeight * 0.1,
        gridBottom = windowHeight * 1;
    $(window).on('scroll', function () {
        $('.inner').each(function () {
            var thisTop = $(this).offset().top - $(window).scrollTop();

            if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
                $(this).addClass('on');
            }  
        });
    });
});

当对象在视口中可见时切换类

3 个答案: