logo标签列表

根据滚动位置改变div的颜色

jquerycss
3

我页面上有4个'line_status'的div类垂直对齐，如下所示:

line_status

line_status

line_status

line_status

这些div是固定的，所以当用户向下滚动页面时，它们始终在视野中。
我想实现的是一种变色效果，以显示用户在表单中滚动到了哪个位置，具体取决于他们在页面上滚动到了哪个位置。
因此，当页面加载时，它总是加载在页面顶部，其中包含一些预填信息，因此第一个'line_status' div始终为绿色，其余为灰色/变灰。
因此，现在如果用户通过向下滚动300像素来导航到我的表单，则第二个出现的line status将从灰色变为绿色。（但不是第三个或第四个，至少在这个阶段不是）。
然后，如果他们再向下滚动300像素，则第三个div从灰色变为绿色，依此类推第四个。
目前我正在使用jquery来尝试完成这个操作，但它会同时更改所有div的颜色，而不是一个接一个地更改，这不是我想要的效果。有什么建议如何实现这个？还可以有人向我展示如何将其从文档滚动更改为div对象滚动函数吗？先谢谢了。
代码:
<script>
    $(document).scroll(function () { // remove "$"
        var y = $(this).scrollTop();        
        if (y > 100) {
            $(".line_status").css("background-color","green");
        }
    });
</script>
1
<section id="section1">给每个部分添加一个ID，然后逐个处理是最好的方式。</section> - StudioTime
4个回答
6

希望下面的演示URL对你有所帮助。这是一个简单的滚动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

还不错，但最好不要依赖于ID。能否重构为使用单个类？ - isherwood
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/

试一下，如果有帮助，请告诉我！

0

我通过以下方式得出了答案

<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>
0

基于 Everton 的回答，我创建了一个更通用的解决方案。它计算来自“remove”类的元素数量，并使用它来分割 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
                      } 

                  });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接