Question

我有一个页面，当您滚动更改背景色时。。当logo rotation为background color时，我需要添加white。

我做到了，一切正常，但是有点问题，即徽标滚动工作缓慢（不正确）有时在您快速滚动时不起作用。我需要意识到背景颜色是立刻将徽标rotate换成白色，然后返回默认位置。

if($body.css('background-color') === "rgb(245, 245, 245)")

这是我主要的条件，检查bg是否为白色

请帮助。

完整的js代码

$(window).scroll(function() {

    // selectors
    let $window = $(window),
      $body = $('body'),
      $panel = $('.panel'),
     $header = $("#header");
    //
    let scroll = $window.scrollTop() + ($window.height() / 3);

    $panel.each(function() {
      let $this = $(this);

      if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {

        // taking bg color
        $body.css('background-color', `#${$(this).data('color')}`);
        $header.css('background-color', `#${$(this).data('color')}`);
      }
    });

    if($body.css('background-color') !== "rgb(245, 245, 245)"){
      TweenMax.to(".card-logo",0.3, {rotationY:180})
    } else {
      TweenMax.to(".card-logo",0.3, {rotationY:0})
    }


  }).scroll();

Answer 1

问题解决了。

我需要将所有内容包装在任何html标记中，并且可以正常工作。

并检查其颜色是否已更改，然后旋转徽标

Codepen

$(window).scroll(function() {

    // selectors
    let $window = $(window),
      $body = $('body'),
      $panel = $('.panel'),
      $header = $("#header"),
      $foo = $('.foo')
    //
    let scroll = $window.scrollTop() + ($window.height() / 3);

    $panel.each(function() {
      let $this = $(this);

      if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {

        // taking bg color
        $foo.css('background-color', `#${$(this).data('color')}`);
        $header.css('background-color', `#${$(this).data('color')}`);
      }
    });

    if($foo.css('background-color') !== "rgb(245, 245, 245)"){
      TweenMax.to(".card-logo",0.3, {rotationY:180})
    } else {
      TweenMax.to(".card-logo",0.3, {rotationY:0})
    }


  }).scroll();

如果背景发生变化，请旋转徽标

1 个答案: