您需要通过考虑页面的滚动偏移（window.scrollY，或旧浏览器上的window.pageYOffset）来平滑地插入颜色。
三星网站正在过渡纯色而不是渐变色，这稍微简单了一点。
如下所示（see CodePen）：

const [red, green, blue] = [69, 111, 225]
const section1 = document.querySelector('.section1')

window.addEventListener('scroll', () => {
  let y = 1 + (window.scrollY || window.pageYOffset) / 150
  y = y < 1 ? 1 : y // ensure y is always >= 1 (due to Safari's elastic scroll)
  const [r, g, b] = [red/y, green/y, blue/y].map(Math.round)
  section1.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
})

您可以将相同的逻辑应用于渐变颜色。

我认为你需要使用CSS的“transition”属性。

body {
  background: green;
  transition: 0.3s all;
}

然后，您可以添加、删除元素沿着更改颜色：

$(function() {
$(window).scroll(function () {
   if ($(this).scrollTop() > 50) {
      $(‘body’).addClass(‘colorChange’)
      $(‘header’).addClass(‘displayNone’)
      $(‘nav’).removeClass(‘navBackgroundStart’)
      $(‘nav ul’).addClass(‘addBlackBackground’)
   } 
   if ($(this).scrollTop() < 50) {
      $(‘body’).removeClass(‘colorChange’)
      $(‘header’).removeClass(‘displayNone’)
      $(‘nav’).addClass(‘navBackgroundStart’)
      $(‘nav ul’).removeClass(‘addBlackBackground’)
   } 
});
});

我试着使用自定义结束颜色的atomiks的解决方案，但太难了，我发现自己使用chroma.js是一个更好的解决方案
您需要使用两种（或更多种）颜色生成比例：

var scale = chroma.scale(['#1abc9c', '#e74c3c']).domain([0, $(document).height()]);
$(window).on('scroll', function () {
    $('.section').css('background-color', scale(window.pageYOffset));
});

这里我创建了一个带有我想要的颜色的刻度，然后我添加了一个自定义域，这样我的刻度就可以使用偏移位置，偏移位置可以从0（页面顶部）到3600（页面底部）。或者，你可以尝试通过一些数学运算得到介于0和1之间的滚动位置值。
然后，当我们滚动时，我们可以使用当前滚动位置的比例，它将在到达页面底部的最后一个颜色#e74c3c之前，在我们的两种颜色之间生成RGBA颜色

这段jquery代码更改了正文的背景颜色。

$(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() {
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 300) {
                $("body").css('background-color', 'blue');
            } else {
                $("body").css('background-color', 'red');
            }
        });
    });

不要忘记添加转换css来获得你在示例中看到的效果。

body {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

使截面类的背景透明。

.section1, section2 {
  background-color: transparent;
}

这个效果可以用一点JavaScript实现

首先创建一个包含内容的div，然后创建一个比内容小的框，并将overflow属性设置为scroll。
使用一点JavaScript就可以添加功能。首先创建一个事件监听器，当使用滚动效果时触发一个函数。当事件监听器触发时，您可以根据需要动态设置背景颜色。

document.getElementById("myDIV").addEventListener("scroll", myFunction);

function myFunction() {
  document.getElementById("myDIV").style.backgroundColor = "red";
}

div {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  overflow: scroll;
  transition: all 0.5s ease;
}

<p>Try the scrollbar in the div</p>
<div id="myDIV">Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
<br><br>
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>