Question

我有4次出现我的div类'line_status'垂直向下对齐我的页面，如下所示：

line_status

line_status

line_status

line_status

这些div是固定的，因此当用户向下滚动页面时，它们始终在用户的视野中。

我想要实现的是一种更改颜色效果，以显示用户使用表单的位置，具体取决于他们在该页面上滚动到的位置。

因此，当页面加载时，它总是加载在页面顶部，其中包含一些预先填充的信息，因此第一个“line_status”div始终填充为绿色，其余为灰色/灰色。

所以现在如果用户通过滚动300 px导航我的表单，那么第二次出现的行状态将从灰色变为绿色。（但不是第3或第4，至少不是在这个阶段）。

然后，如果他们向下滚动另外300 px，那么第3个div从灰色变为绿色，依此类推第4个。

我正在努力用jquery做这个，因为它一次改变了我所有div的颜色，而不是逐个改变我想要的效果。有什么想法我能做到这一点吗？也有人可以告诉我如何将文档滚动更改为div对象滚动功能？提前致谢

代码：

<script>
    $(document).scroll(function () { // remove "$"
        var y = $(this).scrollTop();        
        if (y > 100) {
            $(".line_status").css("background-color","green");
        }
    });
</script>

Answer 1

试试看看兄弟下方的演示网址。我希望这可以帮到你。这是一个简单的滚动jquery代码。

<强> HTML

 <div id='status-1' class="remove"> 
  <p>I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. 
    I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. </p> 
</div>
<div id='status-2' class="remove">
  <p>I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. 
    I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. </p> 
</div>
<div id='status-3' class="remove">
  <p>I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. 
    I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. </p> 
</div>
<div id='status-4' class="remove">
  <p>I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. 
    I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. </p> 
</div>
<div id='status-5' class="remove">
  <p>I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. 
    I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. </p>  
</div>

<强> JS

$(window).scroll(function(){;
    w = Math.floor( $(window).scrollTop() );  
   $('.remove').css( 'background-color', '' ); 
    if(w<=$('#status-1').offset().top){
         $('#status-1').css( 'background-color', 'red' );   
    }else if(w<=$('#status-2').offset().top){
         $('#status-2').css( 'background-color', 'green' );   
    }else if(w<=$('#status-3').offset().top){
         $('#status-3').css( 'background-color', 'pink' );   
    }else if(w<=$('#status-4').offset().top){
         $('#status-4').css( 'background-color', 'yellow' );   
    }else{
         $('#status-5').css( 'background-color', 'blue' );   
    }

});

Demo

Answer 2

您可以为每个部分指定一个ID，并使用该ID更改颜色。

如果您不想提供ID，可以使用索引更改它，因为您已经知道div应该更改。

这样，代码就像这样：

$(window).on('scroll', function() {
    var toTop = $(this).scrollTop();
    var index = (toTop < 300 ? 0 : (toTop < 600 ? 1 : (toTop < 900 ? 2 : 3)));

    $('.line_status').css('background-color', 'gray');
    $('.line_status').eq(index).css('background-color', 'green');
});

JSFiddle：http://jsfiddle.net/trfaf6kw/

尝试一下，让我知道它是否有帮助！

Answer 3

我设法通过使用以下

来回答这个问题

<script>
$( ".form_frame" ).scroll(function() {
    var y = $( ".form_frame" ).scrollTop();        
    if (y > 650) {
        $("#line1").css("background-color","#777");
    }else{
    $("#line1").css("background-color","#222222");    
    }
});
</script>

Answer 4

基于

Everton的答案，我创建了一个更通用的解决方案。它计算“删除”类中的元素数量，并使用它划分scrollToTop：

var index = 0;
$(window).on('scroll', function() {
            if($(window).width() < 768){ // to work online on mobile
                               var toTop = $(this).scrollTop();
                               var conta = $('.remove').length; // counts how many objects
                               console.log(toTop);// to debug , log in console 
                              index = Math.floor((toTop - ($('#[PUT THE ID OF THE PARENT OF THE REMOVEs]').position().top ))/($('#[PUT THE ID OF THE PARENT OF THE REMOVEs]').height()/conta));  // here it divide the scrollTop minus a bias to begin of here the elements start to appear on the screen by the number of elements, so you get that only one element changes the colour each time 
                               index = Math.min(Math.max(parseInt(index), 0), conta-1); // limit the index so you don't access elements which don't exist
                               
                               $('.view-btn').css('background-color', 'gray');
                               $('.view-btn').eq(index).css('background-color', 'green'); // changes the color of the element
                      } 

                  });

根据滚动位置更改div颜色

4 个答案: