posfixed.js 页面滚动导航条固定插件-BFW插件库

posfixed.js 页面滚动导航条固定插件

posfixed.js 页面滚动导航条固定插件，Posfixed 能够让网页的导航或表头等固定在顶部或底部，让用户更方便的操作或查看信息，淘宝网、易迅网等电子商务网站常常用到这种效果。除了导航和表头，也可以固定其他内容，比如广告、返回顶部等等，同时 Posfixed 也可以作为 IE6 不支持 fixed 的一个解决方案。

使用方式：

第一步引入bfwone，加载依赖项jquery

第二步use插件

第三步设置参数

参数	类型	说明	默认值
direction	字符串	方向，相对于顶部（top）或底部（bottom）固定	top
type	字符串	固定的方式，可选 while 或 always，while 为滚动条滚动到 distance 的数值时固定；always 为一直固定	while
hide	布尔值	是否自动隐藏固定的对象	false
distance	整数	离顶部或底部的数值	0
tag	对象	导航到一个元素	null

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["posfixed"], function() {
                $('.nav').posfixed({
                    distance: 0,
                    pos: 'top',
                    type: 'while',
                    hide: false
                });

                $('.gotop').posfixed({
                    distance: 10,
                    direction: 'bottom',
                    type: 'always',
                    tag: {
                        obj: $('.wrap'),
                        direction: 'right',
                        distance: 10
                    },
                    hide: true
                });

            });
        });
    </script>
    <style>
        .gotop {
            font-size: 12px;
            padding: 10px;
            line-height: 14px;
            color: #fff;
            background-color: #0099CC;
            text-decoration: none;
        }

        .nav {
            width: 100vw;
            height: 36px;
            margin: 0;
            padding: 0;
            list-style-type: none;
            background-color: #0099CC;
        }
        .nav li {
            float: left;
            border-right: 1px solid #00a7df;
        }
        .nav a {
            float: left;
            height: 36px;
            padding: 0 30px;
            line-height: 36px;
            color: #fff;
            text-decoration: none;
        }

    </style>
</head>
<body>
    <div>
        <ul class="nav">
            <li><a href="#a1">说 明</a></li>
            <li><a href="#a2">使 用</a></li>
            <li><a href="#a3">参 数</a></li>
            <li><a href="#a4">兼 容</a></li>
        </ul>
        <div style="height:500px;text-align:center;line-height:500px;font-size:20px;">往下滚动看导航条</div>
        <h2 id="a1">说明</h2>
        <p>
            Posfixed 能够让网页的导航或表头等固定在顶部或底部，让用户更方便的操作或查看信息，淘宝网、易迅网等电子商务网站常常用到这种效果。除了导航和表头，也可以固定其他内容，比如广告、返回顶部等等，同时 Posfixed 也可以作为 IE6 不支持 fixed 的一个解决方案。
        </p>
        <p class="highlight">
            本演示中，导航和右下的“返回顶部”使用了 Posfixed 插件，请注意查看效果。
        </p>

        <h2 id="a2">使用</h2>
        <h3>引入文件</h3>
        <pre><script src="js/jquery.min.js"></script>
            <script src="js/posfixed.js"></script></pre>

        <h3>HTML</h3>
        <pre><div id="example1">
            </div></pre>

        <h3>JavaScript</h3>
        <pre>$(document).ready(function(){
            $("#example1").posfixed({
            distance:0,
            pos:"top",
            type:"while",
            hide:false
            });
            });</pre>

        <h2 id="a3">参数</h2>
        <table>
            <thead>
                <tr>
                    <th width="65">参数</th><th width="60">类型</th><th>说明</th><th width="60">默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>direction</td><td>字符串</td><td>方向，相对于顶部（top）或底部（bottom）固定</td><td>top</td>
                </tr>
                <tr>
                    <td>type</td><td>字符串</td><td>固定的方式，可选 while 或 always，while 为滚动条滚动到 distance 的数值时固定；always 为一直固定</td><td>while</td>
                </tr>
                <tr>
                    <td>hide</td><td>布尔值</td><td>是否自动隐藏固定的对象</td><td>false</td>
                </tr>
                <tr>
                    <td>distance</td><td>整数</td><td>离顶部或底部的数值</td><td>0</td>
                </tr>
                <tr>
                    <td>tag</td><td>对象</td><td>导航到一个元素</td><td>null</td>
                </tr>
            </tbody>
        </table>

        <h2 id="a4">兼容</h2>
        <p>
            Posfixed 兼容以下浏览器：
        </p>
        <ul class="list">
            <li>Firefox 2+</li>
            <li>Internet Explorer 6+</li>
            <li>Safari 2+</li>
            <li>Opera 9+</li>
            <li>Chrome</li>
        </ul>


        <h2>推荐</h2>
        <p>
            如果页面不够长，右下角的“返回顶部”不会出现，所以再增加一些内容，以下的一些 jQuery 插件也是很优秀的，不妨看看。
        </p>

        <a href="#" class="gotop">返回顶部</a>
    </div>

</body>
</html>

posfixed.js 页面滚动导航条固定插件

网友评论0

jquery.history.js

posfixed.js

smoothscroll.min.js