码迷,mamicode.com
首页 > 其他好文 > 详细

jq滚动监听-导航滚动

时间:2016-10-25 18:32:54      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:error   http   fixed   iam   git   targe   ssi   示例   jquery   

github地址:
https://github.com/yutaogege/jquery.nav.js

 

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-3.1.1.min.js"></script>
        <script src="jquery.nav.js"></script>
        <style>
            .wrap {
                width: 500px;
                margin: auto;
                padding-bottom: 200px;
            }
            #nav {
                position: fixed;
                left: 0;
                top: 0;
            }
            .current a {
                color: red;
            }
            #intro {
                padding-top: 20px;
            }
        </style>
    </head>
    <body>
        
        <ul id="nav">
            <li class="current"><a href="#intro">简介</a></li>
            <li><a href="#usage">使用</a></li>
            <li><a href="#options">选项</a></li>
            <li><a href="#examples">示例</a></li>
            <li><a href="#recommend">推荐</a></li>
        </ul>
        
        <div class="wrap">
            <div id="intro">
                <h1>intro</h1>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
            </div>
            <div id="usage">
                <h1>usage</h1>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
            </div>
            <div id="options">
                <h1>options</h1>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
            </div>
            <div id="examples">
                <h1>examples</h1>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
            </div>
            <div id="recommend">
                <h1>recommend</h1>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.
                    Possimus blanditiis veniam illum
                     error quia ipsum voluptatibus
                      pariatur aperiam voluptatem. 
                      Doloremque quos architecto
                       mollitia nobis sunt 
                       alias obcaecati molestias iste tempora?
                </p>
            </div>
        </div>
        
    <script>
    $(function () {
        $(#nav).onePageNav();
    });
    </script>
    </body>
</html>

 

jq滚动监听-导航滚动

标签:error   http   fixed   iam   git   targe   ssi   示例   jquery   

原文地址:http://www.cnblogs.com/lqcdsns/p/5997480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!