Javascript 在滚动div上逐渐淡出淡出

我试图创建淡出淡出淡出效果与滚动，但不知道如何。就像

http://www.popsci.com/

。如果出现滚动，则背景图像（div id固定图像）变淡。它们的代码类似于。但我还不知道如何在代码中轻松应用。请大家检查一下我的密码

var opacity = 1;
      var img = element.find('img');
      // Look for featured stories.
      if (element.length > 0) {
        // Attach background image element.
        $('#page-wrapper').prepend('<div id="fixed-image" style="background-image: url(\'' + img.attr('data-lgsrc') + '\');"></div>');
        img.addClass('hidden');
        var scrollPercent;
        $(window).scroll(function() {
          // When User scrolls down, determine percentage from top to bottom of window.
          scrollPercent = (($(window).scrollTop() / $(window).height() * 1.9) - 0.9);
          if (scrollPercent < 0) {
            $('#fixed-image').css({
              '-webkit-filter'  : 'blur(0px)',
              '-moz-filter'     : 'blur(0px)',
              '-o-filter'       : 'blur(0px)',
              '-ms-filter'      : 'blur(0px)',
              'filter'          : 'blur(0px)'
            });
          }
          var opacityCount = 1.5 - Math.min(1.5, (scrollPercent + 1));
          $('#fixed-image').css('opacity', opacityCount);
          if (scrollPercent <= 1) {
            $('#fixed-image').css('opacity', opacityCount);
            $('#fixed-image').css({
              '-webkit-filter'  : 'blur(' + scrollPercent * 10 + 'px)',
              '-moz-filter'     : 'blur(' + scrollPercent * 10 + 'px)',
              '-o-filter'       : 'blur(' + scrollPercent * 10 + 'px)',
              '-ms-filter'      : 'blur(' + scrollPercent * 10 + 'px)',
              'filter'          : 'blur(' + scrollPercent * 10 + 'px)'
            });
          }
          else {
            $('.content-wrapper-outer').css('background-color', 'rgba(255,255,255,' + opacity + ')');

---

这个很好用。在控制台中，我看到不透明度值在0之后一直运行，甚至一直运行到-值。我不认为after value0不需要更多的向下值

这里有一个函数将不透明度剪裁为0，尽管：“间隔[0到1]之外的任何值，尽管有效，但会被钳制到范围内最近的限值”，所以严格来说这不是必需的

$(window).scroll(function(){
    var opacity = 1 - $(window).scrollTop() / 250;
    if (opacity < 0 ) opacity = 0;
    $(".slider").css("opacity", opacity);
});

$（窗口）。滚动（函数（）{
var opacity=1-$（窗口）.scrollTop（）/250；
如果（不透明度<0）不透明度=0；
$（“.slider”）.css（“不透明度”，不透明度）；
});

更新

$(window).scroll(function(){
    $(".slider").css("opacity", 1 - $(window).scrollTop() / 250);
  });

对于过渡的任意开始和结束，请使用线性方程，如下所示：

$(window).scroll(function(){
    var start = 200, end = 600;
    var opacity = 1 - ($(window).scrollTop() - start) / (end - start);
    if (opacity > 1 ) opacity = 1;
    if (opacity < 0 ) opacity = 0;
    $(".slider").css("opacity", opacity);
  });

$（窗口）。滚动（函数（）{
var开始=200，结束=600；
var opacity=1-（$（window.scrollTop（）-start）/（end-start）；
如果（不透明度>1）不透明度=1；
如果（不透明度<0）不透明度=0；
$（“.slider”）.css（“不透明度”，不透明度）；
});

---

你想淡出什么？滑块中显示的是什么图像？JS代码中的“元素”是什么？我只是更新了我的问题。我想滑块div将淡出淡出像参考网站。在slider div中。无论内容是什么。目前的演示我只是把bxslide。谢谢你的回答你的新小提琴仍然没有你的js代码，就像你的问题一样。请检查它，并添加它，因为它是在您的原始代码。只要测试它是否小于零，如果真设置为零<代码>如果（不透明度<0）不透明度=0…尽管“区间[0到1]之外的任何值虽然有效，但被钳制到范围内最近的限制。”在这种情况下，如果（不透明度<0）不透明度=0，则

是不必要的。谢谢回答。我只是在想如何设置滚动起点。我的意思是不透明度将在滚动位置200时开始，然后以600结束