2

我试图让我的内容在到达页面各个末端的某个接近度时淡入。当触发器设置为最顶部和底部时，淡入淡出工作正常，但是当我设置距离（200px）时，淡入淡出不再起作用并且内容简单地出现。

$(window).scroll(function(){
        if($(window).scrollTop()<=200){
            $('#about .content').stop(true,true).fadeIn("5s");
        } 
        else {
            $('#about .content').stop(true,true).fadeOut("10s");
        }

     if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200) {
            $('#work .content').stop(true,true).fadeIn("5s");
        } else {
            $('#work .content').stop(true,true).fadeOut("5s");
        }
    });
4

1 回答 1

1

正在发生的事情是您有两个功能相互对抗：

第一个函数有一个“if-else”语句，第二个函数也有。这意味着每个函数每次滚动时都会做一些事情。有多种方法可以解决这个问题。

我解决它的方法是使用变量并更新约束。

假设我们有一个变量 onScreen，如果段落在屏幕上，则其值为 1，如果不在屏幕上，则值为 0：

例如：

<div style="height: 800px">Example of scroll with fadeIn, fadeOut.

<p style="margin-top:300px;">These paragraphs will go away when you have scrolled
 more than 10 pixels from the top. They will appear again when you have scrolled 
to a proximity of 50 pixels from the bottom. They will also appear if you go 
within a proximity of 10 pixels of the top again.</p>

</div>

现在对于 jQuery 代码：

var $onScreen = 1;

$(window).scroll(function(){
if($(window).scrollTop() < 10){
      if ($onScreen == 0)
      {
        $("p:first").stop(true,true).fadeIn("slow", "linear");
        $onScreen = 1;  
      }
    }   

if($(window).scrollTop() <= 20 && $(window).scrollTop() >= 10){
      if ($onScreen == 1)
      {
        $("p:first").stop(true,true).fadeOut("slow", "linear");
        $onScreen = 0;  
      }
    } 

 if ($(window).scrollTop() + $(window).height() >= $(document).height() - 50) {
     if ($onScreen == 0)
     {
         $("p:first").stop(true,true).fadeIn("slow", "linear");
         $onScreen = 1;
     }
    }
 });

现在这不是最简洁的方法，我也不是故意这样做的：通过使代码更广泛，我希望你能理解为什么它现在可以工作而以前不能工作（这样你就可以真正学习从中）。

我在 Fiddle 上为你准备了一个活生生的例子：http: //jsfiddle.net/ycCAb/4/

我希望这回答了你的问题。祝你好运！

于 2013-05-30T20:59:18.897 回答