首页 > 资源分享 > 正文
jQuery实现wordpress侧边栏随页面窗口浮动

方法一:jQuery下实现侧边栏随页面浮动(1)

步骤一:首先下载Jquery,上传到主题目录下,将如下代码添加到主题顶部模版的<head>与</head>之间。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery-1.7.1.min.js"></script>

步骤二:将如下代码添加到顶部模版的</head>后:
 

<script type=”text/javascript”>
$(function() {
var $sidebar = $(“#float”),
$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>

 

步骤三:将上面代码中的#float替换成想要浮动的层选择器,可以是id选择器,也可以是类选择器,即#float或.float都可以。当选择.float时可以同时让多个容器随页面的浮动而浮动。

提示:此方法如果在已经加载了WordPress默认的JQ库后会冲突,解决方法是:将第二行的$(function()改为jQuery(document).ready(function($)就可以了。

文章评论

共有 0 条评论

Top