分享一段可以使页面模块浮动的代码。之前一直认为本博客的边栏是非常不理想的。文章长了或者评论多了导致single页面的右边栏缺角了似的。
最近找了下可以实现边栏随窗口下调浮动的代码。找过几个,都不是很理想,下面是我认为比较理想也确实简单可以实现这一功能的代码。这里分享给有需要的人。
<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function () {
var offset = $("#sidebar").offset();
documentHeight = $(document).height();
$(window).scroll(function () {
var sideBarHeight = $("#sidebar").height();
if ($(window).scrollTop() > offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight - 0);
if (newPosition > maxPosition) { newPosition = maxPosition; }
$("#sidebar").stop().animate({ marginTop: newPosition });
} else {
$("#sidebar").stop().animate({ marginTop: 0 });
};
});
});
</script>
代码我就不会解析了。看得懂的都不需要,看不懂的直接复制粘贴使用即可。 (sideBarHeight -0);这里的参数0(零)不是O可自己调制。
效果就是本博现在的右边栏。#sidebar(该模块可修改你想要实现浮动的模块)上面代码放到</body>之前即可。。。其他不解释....
好像也行!
回复取消回复嗯。不太好用。当时试过的。
回复取消回复:evil: :evil: :evil: :evil: :evil:
回复取消回复这个功能在使用上还是比较贴心的。
回复取消回复嗯。感觉还可以。只是本人不太会调网页css中高度宽度的问题。
回复取消回复不喜欢浮动效果
回复取消回复嗯。局部浮动还是有点需要的,可以吸引用户眼球。。。
回复取消回复