zoukankan      html  css  js  c++  java
  • Jquery几行代码解决跟随屏幕滚动DIV

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jquery.text-effects</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <style>
            #test
            {
                position: absolute;
                top: 10px;
                right: 10px;
                 130px;
                height: 60px;
                background: #555;
                color: #fff;
                font-size: 13px;
            }
        </style>
        <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script language="javascript">
            $(document).ready(function () {
                var menuYloc = $("#test").offset().top;
                $(window).scroll(function () {
                    var offsetTop = menuYloc + $(window).scrollTop() + "px";
                    $("#test").animate({ top: offsetTop }, { duration: 600, queue: false });
                });
            }); 
        </script>
    </head> 
    <body> 
        <h1>7行代码的跟随屏幕滚动层.</h1> 
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
        <div id="test">Dev By CssRain.cn<br/>Test ie6+,firefox3.0</div> 
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    </body> 
    </html> 

  • 相关阅读:
    sql DATEDIFF 函数
    电控宝 命令
    dart 函数练习
    json对象和json字符串有啥区别啊
    windows 下 node 入门
    windows 下Nginx 入门
    SQL十进制和十六进制相互转换
    Action向视图传值的6种方式(转)
    从匿名方法到 Lambda 表达式的推演过程
    vue 入门1 组件管理
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234222.html
Copyright © 2011-2022 走看看