当前位置：首页 > 网页特效 > 其他

jQuery超强div固定位置布局特效插件

分类：其他日期：2024-05-14 点击(1) 评论(0)

简介

要使用这个div固定位置插件，需要在html的头部引入jQuery和jQuery.autofix_anything.js以及autofix_anything.css文件。

```html
<div class="wrapper">
  ..
  <div class="sidebar">..</div>
  ..
</div>
```
上面的html结构不是强制性的，只需要类似这样就可以。注意，wrapper对于插件检查哪个div需要位置固定是很重要的。然后你需要做的是选择你需要位置固定的div,这个div在内容超出时将出现滚动条。

##### JAVASCRIPT
通过下面的jQuery代码来调用插件：

```html
$(".sidebar").autofix_anything();
```
通过上面的调用，class为sidebar的div将被固定位置，当用户向下滚动页面时，它将出现滚动条。

##### 可定制参数
```html
$(".sidebar").autofix_anything({
  customOffset: false, 
  manual: false, // Toggle this to true if you wish to manually fix containers with the public method. Default value is false
  onlyInContainer: true // Set this to false if you don't want the fixed container to limit itself to the parent's container.
});
```
下面来说明一下这些参数：

- customOffset：该参数用于设置页面滚动多少距离时容器div开始位置固定。单位为像素。例如，如果你想用户在滚动页面200像素后开始静div固定，可以设置为200。默认值为flase，它将在开始滚动时就静div位置固定。
- manual：如果你想通过公共方法来手动控制div的位置固定，设置这个参数为true。（公共方法参考下面说明）
- onlyInContainer：该参数用于设置到达父容器底部时div是否停止鼠标跟随。默认值为true。
##### 公共方法
插件中提供了几个用于控制的公共方法。

```html
$.fn.manualfix()
```

该方法可以固定/释放一个div容器，在使用该方法前，请确保manual参数被设置为true。

```html
$(".sidebar").autofix_anything({
  manual: true
});
```
然后你就可以在调用这个方法来固定/释放div容器了。

```html
$(".sidebar").manualfix()
```