Question

我正在使用横向滚动的tumblr主题（这是主题http://smpldesign.tumblr.com/post/4547439061/sleep-wave-2-0）

有人可以告诉我如何在滚动时将背景更改为红色吗？然后当它停止滚动时它会恢复为白色？

这就是我在这个主题的CSS中所提出的：

body {font-size: {text:Font Size}px; font-family: {font:Body}; 
color: {color:Text}; text-align:justify; height:100%;
}

body {background:#F50;
transition:all 400ms ease-in;
}

.scrolling {
background:#FF0;
transition:all 400ms ease-in;
} 
table tr { 
vertical-align: top; 
});

这是我在关闭body标签之前所说的：

{/block:Posts}
</div>
</div>

<script>
$(document).on('scrollstart',function(){
$('body').addClass('scrolling');
});

$(document).on("scrollstop",function() {
$('body').removeClass('scrolling');
}); </script>

});

它不适合我。

我将整个代码放在一个pastebin

中

http://pastebin.com/FX2a8nin

Answer 1

假设你有#wrapper div，你可以做一些像这个小提琴here

中显示的内容

根据我可以收集的信息，我假设您想要在用户向下滚动页面时更改背景，然后在他们停止滚动时更改背景。

jQuery就是这样：

jQuery(window).load(function () {
    $(window).scroll(function() {
        $("#wrapper").css('background', 'red');
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer',setTimeout(function() {
            $("#wrapper").css('background', 'blue');
        }, 250));
    });
});

你应该能够将这个添加到你的tumblr主题上，但要确保之前加载了jQuery：

您也可以将$('#wrapper').css("background", "red");替换为$('body').css("background", "red");来使用您的正文标记。随意用你想要的颜色替换'红色'和'蓝色'

最后，如果您想使用类而不仅仅是背景CSS选择器，只需使用.addClass('classname')代替.css('background', 'color')

编辑：随意使用@Shaharz发布的'stopscroll'事件，使代码更清晰

Answer 2

要添加@ShaharZ答案，我在链接问题中引用了一个小提琴。

http://jsfiddle.net/lharby/fbSbT/78/

基本上我们在主体上添加或删除滚动类，此类还包含用于平滑效果的过渡。

最终的js（一旦你使用这些自定义事件）看起来像这样：

$(document).on('scrollstart',function(){
    $('body').addClass('scrolling');
});

$(document).on("scrollstop",function() {
   $('body').removeClass('scrolling');
});

然后css就像这样简单：

body {
   background:#F50;
   transition:all 400ms ease-in;
}

.scrolling {
    background:#FF0;
    transition:all 400ms ease-in;
}

修改

实际上我已经分叉了@Schybo小提琴，因为代码更清晰，更容易理解。这是一个分叉的小提琴：

https://jsfiddle.net/lharby/xxmgceh9/3/

Answer 3

此问题描述了如何知道用户何时开始和停止滚动：Fire event after scrollling scrollbars or mousewheel with javascript

一旦你有了这些事件，你所要做的就是

的CSS：

body.scrolling {
    background-color: red;
}

的javascript：

$(window).on('startScroll', function() {
    $('body').addClass('scrolling')
}
$(window).on('stopScroll', function() {
    $('body').removeClass('scrolling')
}

滚动背景改变颜色？对于tumblr主题

3 个答案: