滚动后更改固定图像的颜色 [英] change color of fixed image after scrolling

问题描述

我想在经过一定程度的滚动(由于背景颜色发生变化)之后，将简单图标的颜色从白色更改为黑色，然后再更改为黑色.请参见 http://www.euimpact.com/erikverwey 并向下滚动-您将明白我的意思).

I want to change the color of a simple icon from white to black - and back - after a certain amount of scrolling (due to change in background color). See http://www.euimpact.com/erikverwey and scroll down - you'll see what I mean).

现在，我希望以某种方式在CSS/JQuery中执行此操作并实现平滑的过渡，即，越过线条时图像可能会变成一半黑一半白.

Now I'm hoping to do this in CSS/JQuery somehow and have a smooth transition, i.e. it'd be possible for the image to be half black half white when crossing the line.

但是我猜这是不可能的，是吗?

But I'm guessing that's not possible, is it?

我是否只需要在某个滚动点上切换到其他图像?

Would I just have to switch to a different image at a certain scrolling point?

非常感谢！

推荐答案

我认为边缘上可能没有其他颜色

I don't think that it is possible to have different colors on the edge

但是要更改颜色，可以使用窗口滚动

But to change the color you can use window scroll

A 小提琴

A fiddle

$(window).scroll(function(){
     if($(window).scrollTop()<800){
            $('#fixed').css('background-color','Yellow');
      }else{
          $('#fixed').css('background-color','White');
    }
})

我为您创建了另一个 小提琴 ，其中div会更改颜色但我已经完成了完整的数学运算，因此您将看到一些问题.但是，您可以四处弄弄小提琴，以找到确切的值以使它对您有用.

I created another fiddle for you where the div changes the color on edge, but I have done the complete mathematic, so you will see some issues. But you can play around the fiddle to find out the exact values to make that working for you.

这篇关于滚动后更改固定图像的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！