Question

我喜欢渐变我放在背景图像上（两者都是背景属性），以便在滚动事件触发时更改（对于初学者...最终我想将它绑定到滚动）。

我已经创建了一个SCSS变量，用于我想要成为每种颜色的渐变百分比。我似乎无法用我的javascript定位正确的属性。我做错了什么？

我已在我的SCSS文件中手动进行了更改，并确认变量和95％属性都正常工作。

提前谢谢！

SCSS：

body { 
    $percent-bg: 15%;
  background:  
    linear-gradient(
        to right,
        rgba(242, 63, 117, 0.45), 
        rgba(63, 242, 188, 0.45) $percent-bg
      ),
    url(http://media.giphy.com/media/5a6IkssTZRI08/giphy.gif) no-repeat center center fixed; 
  background-size: cover;
  height: 100%;
}

JS：

var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 10) {
                $(body).css('$percent-bg', '95%');
            } else {
                $(body).css('$percent-bg', '15%');
            }
        });

Answer 1

您无法通过JavaScript与Sass交谈（除非您正在进行非常唯一设置。如果是，请告诉我们它是什么。）因为JavaScript发生在用户身上代理（浏览器），而Sass在后端编译成CSS，它是传递给浏览器的CSS。

这可能是最好的方法。首先，在Sass中创建一个包含所需样式的新类。例如：

body.scrooll { 
  $percent-bg: 95%;
  background:  
    linear-gradient(
        to right,
        rgba(242, 63, 117, 0.45), 
        rgba(63, 242, 188, 0.45) $percent-bg
      ),
    url(http://media.giphy.com/media/5a6IkssTZRI08/giphy.gif) no-repeat center center fixed; 
}

然后使用JavaScript apply并在滚动时删除该类。

Answer 2

使用KatieK的方法并进行了一些其他更改以使其正常工作，这是最终的代码：

SCSS :(也可以只是CSS ...见注释）

body { 
    $percent-bg: 15%;
  background:  
    linear-gradient(
        to right,
        rgba(242, 63, 117, 0.45), 
        rgba(63, 242, 188, 0.45) $percent-bg
      ),
    url(http://media.giphy.com/media/5a6IkssTZRI08/giphy.gif) no-repeat center center fixed; 
  background-size: cover;
  height: 100%;
}

.scrooll {
    $percent-bg: 95%;
  background:  
    linear-gradient(
        to right,
        rgba(242, 63, 117, 0.45), 
        rgba(63, 242, 188, 0.45) $percent-bg
      ),
    url(http://media.giphy.com/media/5a6IkssTZRI08/giphy.gif) no-repeat center center fixed; 
  background-size: cover;
  height: 100%;
}

JS：

$(document).ready(function($) {
    var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 10) {
                $("body").addClass("scrooll");
            } else {
                $("body").removeClass("scrooll");
            }
        });
});

注意：我的js中的$（body）需要为$（“body”）。此外，现在我们使用两个类，不再需要$ percent-bg。常规CSS可以与第二个rgba之后替换$ percent-bg的百分比一起使用。

在JS中定位SCSS变量

2 个答案: