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

jquery.pinBox-可将任何元素固定在容器中的jQuery插件

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

简介

使用jquery.pinBox插件需要在页面中引入jquery1.7+和jquery.pinBox.min.js文件。

```html

<script src="jquery-1.9.1.min.js"></script>

<script src="js/jquery.pinBox.min.js"></script>    
```
#####  HTML结构
你不需要进行任何特殊的设置，只需要将你需要滚动固定的元素放置在一个容器中，例如下面的代码中的#pinBoxContainer，通过为固定元素添加一个class，例如.pinBox。

```html

<div class="container" id="pinBoxContainer">

    <div class="col-sm-4">
    
        <div class="pinBox">
            <h2 class="headColor">Example box</h2>
            <p>some text</p>
        </div>
    </div>
 
    <div class="col-sm-8">
        <h2 class="headColor">Example box</h2>
        <p>some text</p>
    </div>
</div>    
```
#####  初始化插件
在页面初始化完毕之后，可以通过下面的方法来初始化该插件。

```html
$(document).ready(function() {
    $(".pinBox").pinBox({
        Top : '50px',
        Container : '#pinBoxContainer',
    });
});    
```
#####  配置参数
```html
$(document).ready(function() {
    $(".pinBox").pinBox({
        //default 0px
        Top : '50px',
        //default '.container' 
        Container : '#pinBoxContainer',
        //default 20 
        ZIndex : 20,
        //default '767px' if you disable pinBox in mobile or tablet
        MinWidth : '767px',
        //events if scrolled or window resized  
        Events : function(e){
            console.log(e);
            // e.current => current scroll top [number]
            // e.direction => scroll down or up [up,down]
            // e.width => window width [number]
            // e.active => if pinBox active [true,false]
            // e.disabled => if window width > MinWidth pinBox will disabled [true, false]
        }
    });
});    
```
- Top：元素固定时距离容器顶部的距离，默认为0。
- Container：容器的jQuery选择器，默认值为.container。
- ZIndex：元素的z-index属性，默认值为20。
- MinWidth：视口的最小宽度，当小于这个宽度时元素不再固定。默认值为767像素。
- Events：回调事件。

web299.com

jquery.pinBox-可将任何元素固定在容器中的jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果