[英]How do I make an image partially scroll, then stay fixed, then scroll when you pass a section?
[英]How can I make a fixed background image not stay fixed on scroll?
是的,该标题可能令人困惑,但这就是原因。
我在侧边栏导航下方的网站上有一个捐赠柜台。 问题是,我创建捐赠计数器的方式是使用固定背景图片的Codepen。 愚蠢的我没有想到,如果有人滚动整个内容会大失所望,那么我对编码还是很陌生,所以不知道有什么更好的方法。 这是我的代码和JSfiddle,如果没有在不使用背景图像的情况下如何创建它的建议,那么有人对如何解决我的问题有任何想法?
http://jsfiddle.net/LMqSB/ (我在其中添加了文字,以便您可以滚动)
<div class="container">
<div class="bw"></div>
<div class="show"></div>
<div id="bar" data-total="100">
<div class="text">Currently at <br/><span>70</span><br><i>Click To Give</div>
</div>
CSS
.bw {
width:100%;
height:100%;
position:absolute;
bottom:0; background:url(http://fdfranklin.com/usf-bull-bw.png) fixed left top;
background-clip:content-box;
}
.show {
width:100%;
height:0%;
position:absolute;
bottom:0; background:url(http://fdfranklin.com/usf-bull.png) fixed left top;
background-clip:content-box;
}
jQuery的
percent = $('#bar div span').html();
total = $('#bar').attr('data-total');
percentStart = 0;
setInterval(function() {
$('.show').css('height',percentStart/total*100+'%');
$('#bar').css('height',percentStart/total*100+'%');
$('#bar div span').html('%'+percentStart);
if(percentStart<percent) {percentStart=percentStart+1;}
},35);
$("#bar div").addClass("load");
只需将背景位置设置为左侧和底部: http : //jsfiddle.net/LMqSB/5/
并从背景中删除了“固定”
background: url(http://fdfranklin.com/usf-bull-bw.png) left bottom
在.container
的CSS中,更改
position:relative
至
position:fixed
然后相应地调整top
和left
值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.