如何在使用 CSS 滚动时平滑过渡和更改背景颜色？

Question

I wanted to smoothly transition and change background color while scrolling, preferably using just CSS, and came across the following as a good example: https://minimill.co/我想在滚动时平滑地过渡和更改背景颜色，最好只使用 CSS，并且遇到了以下例子： https ://minimill.co/

How can I achieve the smooth transition in changing the background color?如何在更改背景颜色时实现平滑过渡？ And also when a button is clicked on the navigation bar, navigate to that particular section of the page?还有当单击导航栏上的按钮时，导航到页面的特定部分？ I attempted to check the source code but wasn't any help.我试图检查源代码但没有任何帮助。 The whole source code is in 1 line.整个源代码在 1 行中。

Thank you and will be sure to vote up and accept answer.谢谢您，一定会投票并接受答案。

Answer 1

WITHOUT EXTRA PLUGINS没有额外的插件

If you want to use only JavaScript then you can go about this solution.如果你只想使用 JavaScript，那么你可以使用这个解决方案。

In the code below I have 3 divs and each one has the attribute data-color which contains the color that we want to have on the background when the user is over that div.在下面的代码中，我有 3 个 div，每个 div 都有属性data-color ，其中包含当用户在该 div 上时我们希望在背景上具有的颜色。 I made it so the color changes not just when the div is on top of the page but when we are after the 2/3 of the previus div.我做到了，所以颜色不仅会在 div 位于页面顶部时发生变化，而且会在我们位于 previus div 的 2/3 之后发生变化。

When the user scrolls, the function below document.onscroll = function() { is called.当用户滚动时，下面的函数document.onscroll = function() {被调用。 This function loops through all the divs (credits: https://stackoverflow.com/a/11291363/7053344 ) and if ( if (scrollTop > curDiv.offsetTop - heightBefore){ ) the scroll top is bigger than the top of a div ( curDiv.offsetTop ) minus the 1/3 of the hight of the previous div ( heightBefore ), then the background is changed according to the div's data-color attribute.此函数循环遍历所有 div（来源： https ://stackoverflow.com/a/11291363/7053344）和 if ( if (scrollTop > curDiv.offsetTop - heightBefore){ ) 滚动顶部大于 div 的顶部( curDiv.offsetTop ) 减去前一个div高度的1/3 ( heightBefore )，然后根据div的data-color属性改变背景。 The smooth transition for the change of the background color is achieved by this line: transition: background 1.5s;背景颜色变化的平滑过渡是通过这行实现的： transition: background 1.5s; on the CSS.在 CSS 上。

Also included below are the jumps that you wanted.下面还包括您想要的跳跃。 From the first div there is a link that sends you to the second div etc. You can modify them to fit your navigation bar.从第一个 div 有一个链接可以将您发送到第二个 div 等。您可以修改它们以适合您的导航栏。 In order to understand jumps better you can look here .为了更好地理解跳跃，你可以看这里。

JSFiddle: https://jsfiddle.net/0pe5n97z/2/ JSFiddle： https ://jsfiddle.net/0pe5n97z/2/

 var test = document.getElementById("test"); document.onscroll = function() { scrollTop = document.documentElement.scrollTop; test.innerHTML = scrollTop; allDivs = document.getElementsByTagName('div'); for( i=0; i< allDivs.length; i++ ) { curDiv = allDivs[i]; // The code below makes the background color change when the // scroll top passes the 2/3 of the previous div. heightBefore = 0; if (i > 0){ heightBefore = allDivs[i-1].offsetHeight / 3; } if (scrollTop > curDiv.offsetTop - heightBefore){ color = curDiv.getAttribute("data-color"); document.body.style.background = color; } } };

 body { background: green; transition: background 1.5s; }

 <body> <div style="position:fixed" id="test"></div> <center> <div id="div1" data-color="green"> <p>Title goes Here</p> <a name="green"> <p>Green area</p> Go To <a href="#red" style="color:red">Red area</a> </a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="div2" data-color="red"> <a name="red"> <p>Red area</p> Go To <a href="#blue" style="color:blue">Blue area</a> </a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="div3" data-color="blue"> <a name="blue"> <p>Blue area</p> Return To <a href="#green" style="color:green">Green area</a> </a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </center> </body>

UPDATE更新

In order to make it work on different browsers too, you must add these lines in the CSS:为了使其也适用于不同的浏览器，您必须在 CSS 中添加以下行：

-webkit-transition: background 1.5s;
-moz-transition: background 1.5s;
-ms-transition: background 1.5s;
-o-transition: background 1.5s;
transition: background 1.5s;

and then change the scrollTop initialization in javascript from this:然后从此更改 javascript 中的 scrollTop 初始化：

scrollTop = document.documentElement.scrollTop;

to this:对此：

scrollTop = window.pageYOffset;

You can test it in this updated JSFiddle .您可以在这个更新的JSFiddle中测试它。

Sources for this update:此更新的来源：

WITH EXTRA PLUGINS有额外的插件

As for your question:至于你的问题：

smoothly transition and change background color while scrolling滚动时平滑过渡并更改背景颜色

as I wrote in the comment these sources are very helpful:正如我在评论中所写，这些来源非常有帮助：

The examples in these links use javascript, jquery and other plugins, which I think are neccesary.这些链接中的示例使用了 javascript、jquery 和其他插件，我认为这些插件是必需的。

As for your question:至于你的问题：

when a button is clicked on the navigation bar, navigate to that particular section of the page单击导航栏上的按钮时，导航到页面的特定部分

this link explains it very well:这个链接解释得很好：

http://www.myhtmltutorials.com/jump.html http://www.myhtmltutorials.com/jump.html

Below there is a small example of what you want, that was created by using and combining content from the links above:下面是您想要的一个小示例，它是通过使用和组合上面链接中的内容创建的：

 $( window ).ready(function() { var wHeight = $(window).height(); $('.slide').height(wHeight).scrollie({ scrollOffset: -50, scrollingInView: function(elem) { var bgColor = elem.data('background'); $('body').css('background-color', bgColor); } }); });

 * { box-sizing: border-box } body { font-family: 'Coming Soon', cursive; transition: background 1s ease; background: #3498db; } p { color: #ecf0f1; font-size: 2em; text-align: center; } a { text-decoration: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/jquery.scrollie.min_1.js"></script> <div class="main-wrapper"> <div class="slide slide-one" data-background="#3498db"> <p>Title</p> <center>Go To <a href="#green" style="color:green">Green</a>.</center> </div> <div class="slide slide-two" data-background="#27ae60"> <a name="green"> <p>Green area</p> <center>Go To <a href="#red" style="color:red">Red</a>.</center> </a> </div> <div class="slide slide-three" data-background="#e74c3c"> <a name="red"> <p>Red area</p> <center>Page over. Hope that was helpful:)</center> </a> </div> </div>

Other approaches:其他方法：

Answer 2

Try this css:试试这个CSS：

 -webkit-transition: background-color 1000ms linear;

see my fiddle i did quickly: https://jsfiddle.net/kreza/4jfy1rhg/2/看看我做的很快的小提琴： https ://jsfiddle.net/kreza/4jfy1rhg/2/

如何在使用 CSS 滚动时平滑过渡和更改背景颜色？

问题描述

2 个解决方案

解决方案1
2 2017-02-09 21:43:58

解决方案2
0 2017-02-09 20:49:17

如何在使用 CSS 滚动时平滑过渡和更改背景颜色？

问题描述

2 个解决方案

解决方案1 2 2017-02-09 21:43:58

解决方案2 0 2017-02-09 20:49:17

解决方案1
2 2017-02-09 21:43:58

解决方案2
0 2017-02-09 20:49:17