Question

我现在正在创建一个简单但很酷的网站。基本上我正在运行backstretch js脚本，该脚本允许站点有完整的背景幻灯片，并且它附加到站点的“主体”。然后我有另一个简单的脚本，根据窗口大小为站点提供一个margin-top并减去站点标题的高度，这样当站点加载时，站点标题总是完美地出现在屏幕的底部，你可以看到完整的背景幻灯片。

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

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

这就像一个魅力。

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

在标题下面我有一个带有一些文字的div。我正在运行一个脚本，当你向下滚动一定高度时，该文本会淡出。我实际上首先设置了这个脚本，当用户向下滚动200px时，我将其设置为淡出，这是完美的。当我将它们结合起来时它们仍然可以工作但是淡入淡出效果已经关闭，因为它仍然以相同的速率消失。当页面加载时，标题从底部开始，当用户向上滚动200px时，文本完全淡出。我尝试将其更改为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);
});

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

Answer 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。

当div到达页面顶部时文本淡出？

1 个答案: