Question

我有很多fadein css类的实例。我想要发生的是当我用fadein类滚动到每个div时，div会消失。我已经查看了Check if element is visible after scrolling，但我不确定如何使用它。这似乎不起作用：

$(window).scroll(function () {
    $('.full-pull-quote-text-fadein').each(function (i) {
        if (isScrolledIntoView(this) == 'true') {
            alert();
        }
    });

});
function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

我做错了什么，拜托？

Answer 1

TL; DR - 小提琴http://jsfiddle.net/esxf0vLh/2/

如果没有看到您正在处理的项目的更具体的样本，很难帮助您解决确切的问题，但我可以帮助您更多地了解您发布的代码。

为了让事情变得尽可能简单，我坚持你的确切请求，说明<div>在滚动到视图时变得可见。如果它不在视野中，我现在还没有注意它再次变得不可见，但是这个代码可能是一个更加修补的起点：）

首先，让我们想象一组<div>元素：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

其次，让我们给他们一些风格。默认情况下，我们的元素将是不可见的。我们有一个额外的.is-visible类可以使它们可见 - 我们将在以后使用jQuery添加它：

div {
  background: rebeccapurple;
  opacity: 0;
}

div.is-visible {
  opacity: 1;
}

jQuery时间！让我们创建一个将元素作为参数的函数，然后根据该元素的顶部是否已经通过视口的底部返回true或false（即元素已滚动到视口）：

function isScrolledIntoView(element) {
  // Calculate the current scroll position of the bottom of your
  // viewport - that's the line an element has to pass to qualify 
  // for becoming visible
  var scrollBottomPosition = $(window).scrollTop() + $(window).height();

  // Tell us whether it's true or false that the scroll position of
  // the top of your element is less than the current scroll position
  // of the bottom of your viewport - ie the element has entered the
  // viewport
  return ($(element).offset().top < scrollBottomPosition);
}

这个功能会派上用场。我们将给它一个我们关心的特定元素，然后在每次用户滚动时继续触发该函数。但还没有。

首先，我们要创建一个函数，将.is-visible类添加到我们选择的元素中。

// Takes an element as an argument - we'll give it one later.
function addClassIfVisible(element) {

  // For each of that element, it asks "Is the element scrolled
  // into view?" using the function we've made to answer that question.
  // It'll give us true or false. If true, it adds the `.is-visible` class.
  $(element).each(function () {      
    if (isScrolledIntoView(this)) {
      $(this).addClass('is-visible');
    }
  });
}

几乎完成了。最后，让我们设定阶段。首先，我想说一旦页面加载，我们就希望这个函数能够触发一次 - 折叠上方的任何元素都会立即淡入视图。

然后，我们添加一个事件监听器，以便在每次用户滚动时继续触发该函数。这样，它会不断检查页面上的所有div，并询问每个div，“这个元素是否在首页上可见？”。对于每一个，当它得到答案时，它已准备好添加.is-visible类“是的，这个元素是可见的！”：

// Run the function once first for any `div`
addClassIfVisible('div');

// Create an event listener that will run this function for any `div`
// every time the user scrolls.
$(window).scroll(function () {
  addClassIfVisible('div');
});

查看http://jsfiddle.net/esxf0vLh/2/处的工作版本 - 您可能需要根据您要实现的目标调整上述代码，但希望它有所帮助。让我知道你是如何上场的！

Answer 2

在这里，这会让内容在侧面飞行，同时在滚动时淡入。

我不会将它用于生产网站，也许我会： - ）

<div class="bg"></div>
<div id="menu">
<ul>
<li id="one" class="fiirst"><a href="index.html" class="transition">Home</a>
</li>

http://codepen.io/damianocel/pen/EVojrx

当每个div滚动到视图中时，在每个div中淡入某个类

3 个答案: