[英]Apply shadow to a fixed top banner while scrolling
I have found many solutions to show a shadow or add a class to the top banner when the content has a top < 0px;
我发现许多解决方案可以在内容的
top < 0px;
时显示阴影或向顶部横幅添加类top < 0px;
. 。 But, I would like to know if there was a way to slowly fade in the shadow while scrolling, so that maybe the shadow will only have an
opacity:0.5
after scrolling 10px, for example? 但是,我想知道是否有一种方法可以在滚动时在阴影中逐渐淡入淡出,例如,滚动10px后,阴影可能仅具有
opacity:0.5
?
It is used by Google in the Google+ pages, where you are scrolling the content and then the shadow underneath the top slowly fades in while scrolling, but also fades out again if you scroll up again. Google在Google+页面中使用它,您在其中滚动内容,然后滚动时顶部下方的阴影逐渐淡入,但如果再次向上滚动,则阴影也会再次淡出。 Can anybody please tell me how this is made with jquery and css3?
谁能告诉我这是如何用jquery和css3制作的?
I have looked at this one but the only thing wrong is that I want the shadow to fade in more and more while scrolling.. I don't want it to appear all of a sudden. 我已经看过这个了,但唯一的错误是我希望阴影在滚动时逐渐消失。.我不希望它突然出现。
maybe it is possible to do it in steps.. This doesn't work, but it may give you an idea.. 也许可以分步进行。.这行不通,但是可能会给您一个想法。
var done = $(document).scrolltop() - 20x;
// now we can use this number as 100% scrolled
$(document).scroll(function() {
// here we can animate the shadow opacity after 20%, 40%, 60%, 80% and 100%
}
DEMO — Something like this? 演示 —这样的东西?
This example uses CSS3 transitions to fade in/out the box-shadow
on the fixed
element. 此示例使用CSS3过渡淡入/淡出
fixed
元素上的box-shadow
。
Update: 更新:
DEMO — Alternate solution where opacity of box-shadow
reflects the scroll position where 100px (and greater) from the top of the page is 100% opacity (zero transparency) and 10px from top is 10% (or 0.1) opacity (90% transparency). DEMO —替代解决方案,其中
box-shadow
不透明度反映了滚动位置,其中距页面顶部100px(及更高)的像素为100%不透明(零透明度),距顶部10px为10%(或0.1)的不透明度(90%透明度) )。
Ask your question in a more specific manner with an running example maybe? 也许通过运行示例以更具体的方式问您的问题? But the pattern should be something like this:
但是模式应该是这样的:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.