div到达页面顶部时文本褪色？答案

【问题标题】：Text fade when div reaches the top of the page?div到达页面顶部时文本褪色？
【发布时间】：2014-01-26 00:03:34
【问题描述】：

我现在正在创建一个具有简单但很酷的效果的网站。基本上，我正在运行 backstretch js 脚本，该脚本允许网站拥有完整的背景幻灯片，并且它附加到网站的“正文”。然后我有另一个简单的脚本，它根据窗口大小为站点提供一个边距顶部，并减去站点标题的高度，因此当站点加载时，站点标题始终完美地显示在屏幕底部，您可以看到完整的背景幻灯片。

这是我用于 margin-top 的代码。

$(".site-container").css("margin-top", $(window).height() - $(".site-header").height());
});

这就像一个魅力。

现在我遇到的问题是我使用的以下脚本。

在标题的正下方，我有一个带有一些文本的 div。我正在运行一个脚本，当您向下滚动某个高度时，该脚本会使该文本淡出。实际上，我首先设置了这个脚本，然后我将它设置为当用户向下滚动 200 像素时淡出，这是完美的。当我将两者结合起来时，它们仍然有效，但淡入淡出效果关闭，因为它仍然以相同的速度淡出。当页面加载时，标题从底部开始，当用户向上滚动 200 像素时，文本完全淡出。我尝试将其更改为 800px，但所做的只是使文本需要 800px 才能完全淡出，这不是我需要的。我需要做的是让这个文本淡入淡出脚本在站点标题到达屏幕顶部时触发。

这是我用来创建文本淡入淡出的代码。

  var didScroll = false;
  var icon = $(".home-sec-1-text");
  var $window = $(window);

  $(window).scroll(function(){
  didScroll = true;
  });

  window.setInterval(function () {
    if (didScroll) {
      if (1-$window.scrollTop()/200 > -10) {
          icon.css({opacity: 1-$window.scrollTop()/200});
      }
      didScroll = false;
    }
  }, 50);
});

如何修改此脚本以实现我的目标？提前致谢！

【问题讨论】：

这个问题可能会短很多
哈哈哈对不起。我是个菜鸟，目前我认为所有这些信息都会有所帮助。

标签： jquery fade

【解决方案1】：

我不太确定我是否非常了解你，但你可以处理scroll() 上的所有事情，这就是解决方案：

$(".site-container").css("margin-top", $(window).height() - $(".site-header").height());

var icon = $(".home-sec-1-text");
var $window = $(window);

$window.scroll(function () {
    var windowTop = $window.scrollTop();
    var headerOffset = $(".site-header").offset().top;

    if (windowTop >= headerOffset) {
        icon.fadeTo('slow', 1);
    }
});

我们基本上是将$(window).scrollTop() 的值与$(header) 顶部的offset() 位置进行比较，因此当滚动条到达标题的顶部时，<div> 会出现淡出效果。

看到这个jsfiddle demo。

【讨论】：