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

这是一款超级强大的jQuery div固定位置布局特效插件。开发者要制作一个真正动态位置固定的div页面布局是一件十分不容易的事情。如果只使用CSS来制作又不够灵活，所以只有使用javascript来动态的计算出div的位置。

HTML结构

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

<div class="wrapper">
  ..
  <div class="sidebar">..</div>
  ..
</div>
                

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

JAVASCRIPT

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

$(".sidebar").autofix_anything();
                

通过上面的调用，class为sidebar的div将被固定位置，当用户向下滚动页面时，它将出现滚动条。

可定制参数

$(".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。

公共方法

插件中提供了几个用于控制的公共方法。

• $.fn.manualfix()

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

  $(".sidebar").autofix_anything({
    manual: true
  });
                      

  然后你就可以在调用这个方法来固定/释放div容器了。

  $(".sidebar").manualfix()