右侧浮动展示效果

代码实现网页侧边栏随页面滚动的浮动效果。

侧边栏随页面滚动的浮动效果可以在您的wordpress网站在文章内容比较长的时候，用户浏览到页面下方时，不至于使整个页看上去不那么协调。看了很多的博客在侧边栏的某个模块设置了浮动，效果很不错，特别是对于有广告的网站，大大增加了广告的曝光度。那么，如何实现呢？今天我们就来讲几种不用插件来实现的方式，当然，方法都同整理网上的一些方法。

在用以下几种方法的时候，首先要确保引入了jQuery文件，如果没有的话，请在header.php文件中引入

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

当然也可以引入主题中的jquery文件。点击这里查看更多在线jquery CDN。
在footer.php中</body>前面加上如下代码：

右侧漂浮代码

/*页面智能层浮动
整理发布：9iphp.com
*/
jQuery(document).ready(function($){
    var $sidebar = $(".float"),
    $window = $(window),
    offset = $sidebar.offset(),
    topPadding = 20;
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

然后打开主题侧边栏文件sidebar.php，把你想要跟随浮动的层添加id=float属性，大家可以参考如下代码：

<div class="float">这里放入要漂浮的元素 </div>

侵删转自：https://9iphp.com/

---

获取网页坐标

<script>
$(document).ready(function(){
	$("button").click(function(){
		var x=$("p").offset();
		alert("上: " + x.top + " 左: " + x.left);
	});
});
</script>

菜鸟教程：jQuery  offset() 方法设置或返回被选元素相对于文档的偏移坐标。

---

跳转到指定坐标

function scrollWindow(){
    window.scrollTo(100,500);
}

菜鸟教程：Window scrollTo() 方法可把内容滚动到指定的坐标。

---

控制网页元素大小

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("#btn1").click(function(){
		$("#box").animate({height:"300px"});
	});
	$("#btn2").click(function(){
		$("#box").animate({height:"100px"});
	});
});
</script>

<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>

菜鸟教程：jQuery animate() 执行 CSS 属性集的自定义动画。该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。