Question

我在包装元素中有一个线性渐变的页面。

这是HTML：

<body>
    <div id="wrapper">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

CSS为：

#wrapper {
    position: relative;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: -webkit-linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%); /* Firefox 3.6 - 15 */
    background: linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%);
    padding-bottom: 1px;
}

可以单独显示渐变。但是，当我向下滚动页面时，我想使用js / jquery更改渐变。我不认为当前的js代码目前不会影响任何事情。我该如何解决？谢谢。

$(window).scroll(function(){
        var topDis = $(window).scrollTop();
        $("#wrapper").css("background", "linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(30,30,30,1) " + (60 - topDis/100) + "%, rgba(180,180,180,1) 100%);");
        $("#wrapper").css("background", "-webkit-linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(30,30,30,1) " + (60 - topDis/100) + "%, rgba(180,180,180,1) 100%);")
      });

Answer 1

无需Javascript / jQuery即可实现。只需使用CSS。下面是示例。

body {
  height: 3000px;  /* height has to be defined for scrolling */
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  }

<h1>Change Background Gradient on Scroll</h1>

<h2>Linear Gradient - Top to Bottom</h2>
<p>This linear gradient starts at the top. It starts green, transitioning to blue.</p>

<h2 style="position:fixed;">Scroll to see the effect.</h2>

Answer 2

删除结束引号前的分号。

$("#wrapper").css("background", "-webkit-linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(30,30,30,1) " + (60 - topDis/100) + "%, rgba(180,180,180,1) 100%);")

它应该是这样的：

$("#wrapper").css("background", "linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(30,30,30,1) " + (60 - topDis/100) + "%, rgba(180,180,180,1) 100%)")

使用JavaScript / jQuery更改线性渐变百分比

2 个答案: