我想在滚动时平滑地过渡和更改背景颜色，最好只使用 CSS，并且遇到了以下例子:https://minimill.co/
如何实现背景颜色变化的平滑过渡？还有当单击导航栏上的按钮时，导航到页面的特定部分？我试图检查源代码但没有任何帮助。整个源代码在 1 行中。
谢谢您，一定会投票并接受答案。
最佳答案
没有额外的插件
如果您只想使用 JavaScript，那么您可以使用此解决方案。
在下面的代码中，我有 3 个 div，每个都有 data-color 属性，其中包含当用户在该 div 上时我们希望在背景上显示的颜色。我做到了，所以颜色不仅会在 div 位于页面顶部时发生变化，而且会在我们位于 previus div 的 2/3 之后发生变化。
当用户滚动时，document.onscroll = function() { 下面的函数被调用。此函数循环遍历所有 div(来源:https://stackoverflow.com/a/11291363/7053344)并且如果(if(scrollTop > curDiv.offsetTop - heightBefore){)滚动顶部大于 div 的顶部( >curDiv.offsetTop) 减去前一个div高度的1/3(heightBefore)，然后根据div的data-color改变背景> 属性。背景颜色变化的平滑过渡是通过以下行实现的:transition: background 1.5s; 在 CSS 上。
下面还包括您想要的跳跃。从第一个 div 有一个链接可以将您发送到第二个 div 等。您可以修改它们以适合您的导航栏。为了更好地理解跳跃你可以看看here .
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>更新
为了使其也适用于不同的浏览器，您必须在 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;
然后从这里更改 javascript 中的 scrollTop 初始化:
scrollTop = document.documentElement.scrollTop;
为此:
scrollTop = window.pageYOffset;
您可以在此更新的 JSFiddle 中对其进行测试.
本次更新的来源:
- > css3 background-size transition animation in Webkit doesn't work... Bug? Or wrong syntax?
- > document.documentElement.scrollTop return value differs in Chrome
带有额外的插件
关于你的问题:
smoothly transition and change background color while scrolling
正如我在评论中所写，这些资源非常有用:
这些链接中的示例使用了javascript、jquery和其他插件，我认为这是必要的。
关于你的问题:
when a button is clicked on the navigation bar, navigate to that particular section of the page
这个链接解释得很好:
下面是您想要的一个小示例，它是通过使用和组合上面链接中的内容创建的:
$( 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>其他方法:
关于javascript - 如何在使用 CSS 滚动时平滑过渡和更改背景颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42146414/