如何实现这样的滚动div与改变CSS？ [英] how to achieve such a scrolling div with changing css?

问题描述

此网站在左侧有一个滚动div。当您滚动页面时，div也会有节奏地滚动，图像的颜色也会改变。 position：fixed 是不是能做到的。

b
$ b

EDIT：

position：fixed 是所有我可以使用得到一个div固定在一个位置与页面滚动。但如何添加更改div的节奏？我还需要什么研究工作来显示（负排名）？

解决方案

  var divs = $（'。fademe'）; 
 $（window）.on（'scroll'，function（）{
 var st = $（this）.scrollTop（）; 
 if（st> 50&& st < 100）{
 $（'。fademe'）。css（{
'color'：'#fff'
}）; 
} 
 else { 
 $（'。fademe'）。css（{
'color'：'＃000'
}）; 
} 
} 
  

此功能将改变div中的文本颜色，当滚动条位置在50和100.否则文本将是黑色的

你可以修改上面的jquery代码来改变任何你想要的css。

在此尝试一下 http://jsfiddle.net / J8XaX / 29 /

添加了与此相同的反弹 http://jsfiddle.net/J8XaX/43/

希望这有助于

This site has a scrolling div on the left. As you scroll the page the div also scrolls rhythmically and the color of the image also gets changed. position:fixed is not all that can do it .

What is the technique then ?

EDIT:

position:fixed is all that I can use to get a div fixed at a location with the page scrolling. But how to add the rhythm of the changing div? What else research effort do I need to show (negative ranking)?

解决方案

you can achieve this by using jquery.

var divs = $('.fademe');
$(window).on('scroll', function() {
    var st = $(this).scrollTop();
    if (st > 50 && st < 100) {
        $('.fademe').css({
            'color': '#fff'
        });
    }
    else {
        $('.fademe').css({
            'color': '#000'
        });
    }    
});

this function will change the color of the text in a div when the scroll bar position is between 50 and 100. otherwise the text will be black

you can modify the jquery code above to alter any css you'd like.

try it yourself here http://jsfiddle.net/J8XaX/29/

added bounce with this one http://jsfiddle.net/J8XaX/43/

Hope this helps

这篇关于如何实现这样的滚动div与改变CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！