我希望在背景图像上放置的渐变(两者都是背景属性)在由滚动事件触发时发生变化(对于初学者......最终我想将其绑定(bind)到滚动)。
我已经为我想要的每种颜色的渐变百分比创建了一个 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%');
}
});
最佳答案
您无法使用 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 应用并在滚动时删除该类。
关于javascript - 在 JS 中定位 SCSS 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24374884/