有风的日子

jQuery实现侧边栏随窗口滚动

Luoshui邀请您加入WORDPRESS技术交流QQ群:31196817 → wordpress技术交流

jQuery实现侧边栏随窗口滚动。

很简单,前提是你的主题必须已加载了jQuery。

 

把下面代码加到主题头部header.php模版中即可:

 

<script type=”text/javascript”>

$(function() {

var $sidebar = $(“#sidebar”),

$window = $(window),

offset = $sidebar.offset(),

topPadding = 15;

$window.scroll(function() {

if ($window.scrollTop() > offset.top) {

$sidebar.stop().animate({

marginTop: $window.scrollTop() – offset.top + topPadding

});

} else {

$sidebar.stop().animate({

marginTop: 0

});

}

});

});

</script>

可根据不同的主题模版,自行修改一下其中的DIV标签#sidebar名称。此方法兼容所有浏览器。

 

演示效果

 

来源:http://zmingcx.com/jquery-the-the-the-the-the-the-sidebar-scroll-with-the-window.html

转载请注明:有风的日子 > WordPrees > jQuery实现侧边栏随窗口滚动

评论 (0) 分享

评论 0

发表评论

电子邮件地址不会被公开。 必填项已用*标注