随屏幕滚动的层是经常能见到的页面特效,貌似还看到有相关的JQuery插件,其实用JQuery一句代码足矣。

首先需要一个绝对定位的元素

<div id="test" style="position:absolute;">test</div>

实现的原理很简单,随页面滚动(Scroll)事件动态设置元素的css top值。

比如定位在页面顶端

$(window).scroll(function(){
	$('#test').css('top', $(document).scrollTop());
});

定位在页面底端

$(window).scroll(function(){
	$('#test').css('top', $(document).scrollTop() + $(window).height() - $('#test').height());
});

定位在其他位置可以根据具体情况+-top调整即可。

可以参看DEMO

不过固定一个层的最好方法还是用css的position:fixed;。此为后话。


 Tags : YD的程序员葛阁 jQuery javascript Scroll

Donate:Buy me a coffee  | 文章有帮助,可以请我喝杯咖啡

72色

以滚动 窗体就消失了。 有什么解决方法?

72色