淡入当div滚动到视口时 [英] Fade In div when it's scrolled into viewport

问题描述

好的，所以我一直在寻找简单的 方式来淡入div，当用户将其滚动到视图中时，我找不到一个直接的解决方案。

HTML

 < div class =container > 
 
< div class =topdiv>这是一个100％的高度div。用户从此处向下滚动。< / div> 
 
< div class =fadethisdiv>这个内容应该在
中淡入一次.fadethisdiv在视口底部是[so many] px。 
我们以150px为例。< / div> 
 
< / div> 
  

CSS

  .container {
 width：100％; 
 height：600px; 
} 
 
 .topdiv {
 height：100％; 
 background-color：＃09f; 
 text-align：center; 
 font-size：24px; 
} 
 
 .fadethisdiv {
 height：100％; 
背景颜色：＃36afff; 
 text-align：center; 
 font-size：24px; 
} 
  

JS

  //跟我说话。 
  

这是一个小提琴： http://jsfiddle.net/kz2z5/2/

解决方案

这里有一个在由 .topdiv div滚动之后触发 fadeIn jQuery函数的解决方案。

它从 scrollTop 函数中减去视口大小以获取滚动位置的底部，然后检查是否它的值大于 .topdiv div的高度加上150px，或者你希望它淡入淡出。

由于div最初必须显示在页面上，所以我们有一个向下滚动的地方，我们将可见性设置为隐藏而不是使用 display：none 。我们使用 fadeIn ，它预期元素以 display：none 开头，所以我们隐藏 div并将其淡入。

然后，我们删除滚动监听器，以便元素不会连续隐藏， code> fadeIn 后，我们滚动通过 .fadethisdiv div。

<$ （$（window）.scrollTop（））;
var topDivHeight = $（。）。$ {code> $（window）.scroll（function（）{
console.log （）;
$ b $ var triggerAt = 150;
var triggerHeight =（topDivHeight - viewPortSize）+ triggerAt;

if（$（window）.scrollTop（）> = triggerHeight）{
$（'。fadethisdiv'）.css（'visibility'，'visible'）。hide （）.fadeIn（）;
$（this）.off（'scroll'）;
}
}）;

小提琴

Okay, so I've been searching for a simple way to fade in a div when a user scrolls it into view, but I can't find a straight solution.

HTML

<div class="container">

<div class="topdiv">This is a 100% height div. User scrolls down from here.</div>

<div class="fadethisdiv">This content should be faded in 
once .fadethisdiv is [so many]px into the bottom of the viewport.
Let's use 150px as an example.</div>

</div>

CSS

.container {
       width:100%;
       height:600px;
}

.topdiv {
       height:100%;
       background-color:#09f;
       text-align:center;
       font-size:24px;
}

.fadethisdiv {
       height:100%;
       background-color:#36afff;
       text-align:center;
       font-size:24px;
}

JS

// Talk to me.

Here's a fiddle: http://jsfiddle.net/kz2z5/2/

解决方案

Here's a solution that triggers the fadeIn jQuery function after scrolling by the .topdiv div.

It subtracts the viewport size from the scrollTop function to get the bottom of the scroll position, and then checks whether its value is greater than the height of the .topdiv div plus the 150px or however far down you'd like it to fadeIn at.

Since the div must initially be displayed on the page so that we have somewhere to scroll down to we set the visibility to hidden instead of using display:none. We're using fadeIn, which expects the element to start with display:none, so we hide the .fadethisdiv div and fade it in.

We then remove the scroll listener so that the element doesn't continuously hide and fadeIn after we have scrolled past the .fadethisdiv div.

$(window).scroll(function () {
    console.log($(window).scrollTop());
    var topDivHeight = $(".topdiv").height();
    var viewPortSize = $(window).height();

    var triggerAt = 150;
    var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;

    if ($(window).scrollTop() >= triggerHeight) {
        $('.fadethisdiv').css('visibility', 'visible').hide().fadeIn();
        $(this).off('scroll');
    }
});

Fiddle

这篇关于淡入当div滚动到视口时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！