zoukankan      html  css  js  c++  java
  • 浮动导航条的实现

    $(document).ready(function () {
        $.fn.smartFloat = function () {
            var position = function (element) {
                var tops = $(".con_title").position().top;
                var top = element.position().top-tops;
                var left = element.position().left; //当前元素对象element距离浏览器上边缘的位置
                var pos = element.css("position"); 
                $(window).scroll(function () { //侦听滚动事件
                    var scrolls = $(this).scrollTop();
                    if (scrolls > top) { //如果滚动到页面距离超出了当前元素element的相对页面顶部的高度
                        if (window.XMLHttpRequest) { //如果不是ie6
                            element.css({ //设置CSS
                                position: "fixed", //固定定位
                                top: top, //距离页面顶部为top
                                left: left
                            }).addClass("shadow"); //加上阴影样式
                        }
                        else { //如果是ie6
                            element.css({
                                top: scrolls //与页面顶部距离
                            });
                        }
                    }
                    else {
                        element.css({ //如果当前元素element未滚动到浏览器边缘,则使用默认样式
                            position: pos,
                            top: top
                        }).removeClass("shadow"); //移除阴影样式
                    }
                });
            };
    
            return $(this).each(function () {
                position($(this));
            });
        };
    });
    $(function () {
        $(".con_title").smartFloat();
        $(".con_right").smartFloat();
    });

     html页:

    <!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>無題のページ</title>
        <link href="css/Nav.css" rel="stylesheet" type="text/css" />
    
        <script src="Lib/jquery-1.6.2.min.js" type="text/javascript"></script>
    
        <script src="Lib/jquery.query.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="content">
        <div class="nav">
            <ul>
                    <li><a href="#">宝贝详情</a></li>
                    <li class="cur"><a href="#">评价详情(123)</a></li>
                    <li><a href="#">成交记录(68件)</a></li>
                </ul>
        </div>
        <div class="nav_left"></div>
        <div class="nav_right"></div>
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
    </html>
    
    <script src="Lib/Nav.js" type="text/javascript"></script>
  • 相关阅读:
    springboot 踩坑之表单验证
    爬虫学习研究
    selenium+chrome知识
    每天学一点linux命令
    Javascript禁止子元素继承父元素的事件
    sass编译css(转自阮一峰)
    php配置虚拟主机的配置步骤(hosts、httpd.conf、vhosts.conf)1.配置本地的dns文件2.配置apache的主配置文件3.配置Apache的虚拟主机
    修改原代码定制bootstrap
    网页在线进行标准验证
    浏览器兼容性判定写法格式(ie)
  • 原文地址:https://www.cnblogs.com/littleCode/p/3395271.html
Copyright © 2011-2022 走看看