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

当前位置:主页 > jQuery库 > 布局和界面 > jQuery超强div固定位置布局特效插件
jQuery超强div固定位置布局特效插件
分享:

    插件介绍

    这是一款使用jQuery制作的可以使某个div固定的某个位置的页面布局特效插件。该div固定位置插件可以使侧边栏固定,也可以使顶部div缩小后固定在顶部或使某些按钮固定在页面上,非常实用。

    浏览器兼容性

    浏览器兼容性
    时间:2014-12-30
    阅读:
简要教程

这是一款超级强大的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()