zoukankan      html  css  js  c++  java
  • jquery实现顶部浮动效果

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
        <title>test page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/main.css" />
        <script src="./jquery.js"></script>
    </head>
    <body>
    <div class="top"></div>
    <div class="wrap">
        <div class="tip">浮起来吧</div>
        <div class="xia">mmmmmmmmmmmmmmmmmmbbbbbbbbbbbbbbbbbbbbbbb</div>
        
            1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
            1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
            1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
            1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    </div>
    <script type="text/javascript">
        $(function(){
            var stiptop = $(".tip").position().top;
            var sNum = 210;
            $(window).scroll(function(){
                var sTop = parseInt($(window).scrollTop());
                if(sTop > 210){
                     $(".tip").css({'position':'fixed','marginTop':'0px'});
                }
                else{
                    $(".tip").css({'position':'static','marginTop':'10px'});
                }
            });
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    web网络编程
    C++ 多线程*****(看书补充)
    C++信号处理
    预指令
    C++模板*******
    C++ 命名空间
    动态存储
    异常处理**********
    私钥、秘钥详解
    Pod控制器应用进阶
  • 原文地址:https://www.cnblogs.com/houweijian/p/3338998.html
Copyright © 2011-2022 走看看