右侧浮动展示效果

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

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

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

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

当然也可以引入主题中的jquery文件。点击[这里](https://9iphp.com/web/javascript/655.html)查看更多在线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/](https://9iphp.com/opensystem/wordpress/706.html)

---

## 获取网页坐标

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

[菜鸟教程](https://www.runoob.com/jquery/css-offset.html)：jQuery  offset() 方法设置或返回被选元素相对于文档的偏移坐标。

---

## 跳转到指定坐标

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

[菜鸟教程](https://www.runoob.com/jsref/met-win-scrollto.html)：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>
```

[菜鸟教程](https://www.runoob.com/jquery/eff-animate.html)：jQuery **animate()** 执行 CSS 属性集的自定义动画。该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

最后修改：2024 年 10 月 07 日

如果觉得我的文章对你有用，请随意赞赏

右侧浮动展示效果

admin • 2024 年 10 月 07 日