[英]jQuery - Change background colour on scroll
我想在滚动时转换固定标题元素的背景颜色。 因此,当用户向下滚动整页块网站时,标题会巧妙地改变以补充块颜色。 我几乎已经在Pen上实现了这一点,但是我无法确定如何测量已滚动多少作为何时更改的标志。
一些额外信息:要更改的滚动量为400px。 背景颜色以数组形式存储和提取。 作为参考我的jQuery代码如下:
$(document).ready(function(){
var bgArray = ["#252525","#333333","#454545","#777777"];
var scrollHeight = 400;
var scrolled = $(window).scrollTop(); //What is this measuring?
$(window).scroll(function() { //Can these conditions be neatened into one function?
if(scrolled < scrollHeight) {
$('header').css('background', bgArray[0]);
}
if(scrolled > scrollHeight) { // i.e more than 400px
$('header').css('background', bgArray[1]);
}
// and so on (800, 1200...)
})
})
有关完整代码,请参阅笔。 任何建议都非常感谢!
在滚动时根据header
下方的当前块设置header
的background
:
因为header
有固定的位置 ,我们可以使用$header.offset().top
来获取窗口滚动的数量 $header.offset().top
,
( 视图中当前块的索引 )是( 窗口滚动的量 )与( 每个块的高度 )的比率,
现在调整header
的高度,视图中当前块的索引是Math.floor(($header.offset().top + headerHeight) / sectionHeight)
。
请参阅以下简化演示:
$(function() { var $header = $('header'), $window = $(window), bgArray = ["#252525", "red", "blue", "green"], headerHeight = 50, sectionHeight = 400; $window.scroll(function() { $header.css('background', bgArray[Math.floor(($header.offset().top + headerHeight) / sectionHeight)]); }); });
:root { --header: 50px; /* header height */ --block: 400px; /* block height */ } * { box-sizing: border-box; /* include padding in width / height calculations */ } body { margin: 0; /* reset default margin of body */ } header { height: var(--header); /* sets height of header */ position: fixed; top: 0; left: 0; width: 100%; color: #FFF; padding: 12px 0; background: #252525; /* initial background */ transition: background 1s ease; } .container { margin: 0 auto; } .wrap>div { height: var(--block); /* sets height of each block */ text-align: center; } p { margin: 0; /* reset margin of p */ } .block-1 { background: #27AACC; color: #FFF; } .block-2 { background: #668E99; color: #FFF; } .block-3 { background: #4AFFC1; color: #444; } .block-4 { background: #FF8F8A; color: #FFF; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <div class="container"> Website Title. </div> </header> <div class="wrap"> <div class="block-1"> <div class="container"> <p>This pen was made to solve a problem on a project...</p> </div> </div> <div class="block-2"> <div class="container"> <p>...I needed a sticky header with thr right bg colour.</p> </div> </div> <div class="block-3"> <div class="container"> <p>But this conflicted with the footer, which was the same colour...</p> </div> </div> <div class="block-4"> <div class="container"> <p>So the solution was to subtley change the header's bg on scroll</p> </div> </div> </div>
使用$(window).scrollTop() > $('.block-1').offset().top
检查每个block
的top
是否滚动了多少窗口( scrollTop
)。 所以现在我们可以使用它来改变进入块的颜色 - 见下面的演示:
$(document).ready(function() { var $header = $('header'), $window = $(window), bgArray = ["#252525", "#333333", "#454545", "#777777"], headerHeight = $header.outerHeight(); $window.scroll(function() { for (var i = 1; i < 5; i++) { if ($window.scrollTop() + headerHeight > $('.block-' + i).offset().top) { $header.css('background', bgArray[i - 1]); } } }); });
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); body { font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: 300; margin-top: 0; } header { width: 100%; height: 50px; line-height: 50px; position: fixed; font-size: 24px; font-weight: 700; color: #FFF; padding: 12px 0; margin: 0; background: #252525; transition: background 1s ease; } .wrap { padding-top: 74px; margin: 0; } .container { width: 960px; margin: 0 auto; overflow: hidden; } .block-1, .block-2, .block-3, .block-4 { height: 400px; text-align: center; } p { margin-top: 185px; } .block-1 { background: #27AACC; color: #FFF; } .block-2 { background: #668E99; color: #FFF; } .block-3 { background: #4AFFC1; color: #444; } .block-4 { background: #FF8F8A; color: #FFF; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <div class="container"> Website Title. </div> </header> <div class="wrap"> <div class="block-1"> <div class="container"> <p>This pen was made to solve a problem on a project...</p> </div> </div> <div class="block-2"> <div class="container"> <p>...I needed a sticky header with thr right bg colour.</p> </div> </div> <div class="block-3"> <div class="container"> <p>But this conflicted with the footer, which was the same colour...</p> </div> </div> <div class="block-4"> <div class="container"> <p>So the solution was to subtley change the header's bg on scroll</p> </div> </div> </div>
请注意,该解决方案通过不必要通过浏览器调用每个滚动更新的章节循环 -我不喜欢它的外观。
您使用滚动作为固定变量,您应该在您的条件下直接使用它
这将使包装div内的所有元素动态化
$(document).ready(function(){
var bgArray = ["#252525","#333333","#454545","#777777"];
$(window).scroll(function() {
for(var i = 1; i < bgArray.length; i++) {
if ($(window).scrollTop() > $('.wrap div:nth-child(' + i + ')').offset().top) {
$('header').css('background', bgArray[i-1]);
}
}
});
})
试试这样:
$(document).ready(function(){
var bgArray = ["#252525","#333333","#454545","#777777"];
var scrollHeight = 400;
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var index=Number((scrolled/scrollHeight).toFixed());
if(bgArray[index]!=undefined)
$('header').css('background', bgArray[index]);
});
})
这是当前滚动,所以它应该在里面: $(window).scrollTop()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.