Question

我是Javascript和Jquery的初学者。我试图实现滚动文本背景图像更改的效果。代码适用于从上到下的滚动，但是一个图像在从下到上滚动时没有变化。这是我的代码，

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(window).scroll(function(){
    var fromTopPx = 200; // distance to trigger
    var scrolledFromtop = $(window).scrollTop();
    if(scrolledFromtop > fromTopPx && scrolledFromtop < 600) // distance to trigger second background image
    {
        $('html').addClass('scrolled');
    }

    else if(scrolledFromtop > 600 && scrolledFromtop < 1000) //  distance to trigger third background image
    {
    $('html').addClass('scrolledtwo');
    }

    else{
        $('html').removeClass('scrolled');
        $('html').removeClass('scrolledtwo')
    }
});
</script>    
<style>

html {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

html {
   background-image:url(assets/images/b1.jpeg);
}

html.scrolled {
    background-image:url(assets/images/ab3.jpeg);
}
html.scrolledtwo {
    background-image:url(assets/images/ab9.jpeg);
}   

</style>
</head>

我错过了什么？

Answer 1

您必须像这样尝试，在classes期间添加的scroll也可能需要在以下某些条件下删除，

＆＃13;

$(window).scroll(function() {
  var fromTopPx = 200; // distance to trigger
  var scrolledFromtop = $(window).scrollTop();
  if (scrolledFromtop > fromTopPx && scrolledFromtop <= 600) // distance to trigger second background image
  {
    $('html').addClass('scrolled');
    $('html').removeClass('scrolledtwo');
  } else if (scrolledFromtop >= 601 && scrolledFromtop < 1000) //  distance to trigger third background image
  {
    $('html').addClass('scrolledtwo');
    $('html').removeClass('scrolled');
  } else {
    $('html').removeClass('scrolled');
    $('html').removeClass('scrolledtwo')
  }
});

＆＃13;

html {
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  height: 1200px;
}

html {
  background-image: url("http://placehold.it/350x150/111/fff");
}

html.scrolled {
  background-image: url("http://placehold.it/350x150/f11/fff");
}

html.scrolledtwo {
  background-image: url("http://placehold.it/350x150/f2f/fff");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

当.scrolledtwo介于200到600之间时删除scrollTop类，当它介于601到1000之间时，同时删除.scrolled，否则如果超过条件则删除两者。

Answer 2

您的代码运行正常。看一看。做一个长页面你会看到效果。您已设置标准以更改背景图像。

干得好。

Answer 3

唯一的问题是：您没有删除旧的添加类并且正在中间区域添加新类，即＆gt; 600你正在滚动和滚动两个类。

所以一个解决方案是：在添加新类之前删除旧类。

在正确的位置使用这些行：

a- $（'html'）。removeClass（'scrolled'）;
b- $（'html'）。removeClass（'scrolledTwo'）;

使用此脚本：

$(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = $(window).scrollTop();
if(scrolledFromtop > fromTopPx && scrolledFromtop < 600) // distance to trigger second background image
{

    $('html').removeClass('scrolledtwo')
    $('html').addClass('scrolled');
}

else if(scrolledFromtop > 600 && scrolledFromtop < 1000) //  distance to trigger third background image
{
$('html').removeClass('scrolled');  
$('html').addClass('scrolledtwo');
}

else{    
    ***$('html').removeClass('scrolled');***
    $('html').removeClass('scrolledtwo')
}
return false;
});

向上滚动时背景图像不会改变，但在向下滚动时工作正常

3 个答案: