zoukankan      html  css  js  c++  java
  • 当导航在显示范围外浮动在窗口顶部随窗口变化位置发生变化

    刚做的一导航,写出来方便以后阅读学习,参考资料http://www.cnblogs.com/hooray/archive/2011/09/21/2184563.html只是在他的基础上做些优化,达到自己想要的效果..

    <script type="text/javascript">
    $(function(){
    //导航距离屏幕顶部距离
    var _defautlTop = $("#nav").offset().top;

    //获取左边的距离,用当前窗口的距离减去导航的宽再除以二
    function leftWidth(){
    var num=$('#nav').width();//ie6受用
    var winWidth=$(window).width();
    var left=(winWidth-num)/2;
    return left;
    }

    //导航默认样式记录,还原初始样式时候需要
    var _position = $("#nav").css('position');
    var _top = $("#nav").css('top');
    var _left = $("#nav").css('left');
    var _zIndex = $("#nav").css('z-index');

    //当文档窗口改变大小时触发
    $(window).resize(function(){
    if($.browser.msie && $.browser.version=="6.0"){ //防止ie6bug <在小窗口变大时,距离头部的位置错位>
    $("#nav").css({'top':eval(document.documentElement.scrollTop),'left':leftWidth()});
    }else{
    $("#nav").css({'left':leftWidth()});
    }
    });
    //鼠标滚动事件
    $(window).scroll(function(){
    if($(this).scrollTop() > _defautlTop){
    //var _defautlLeft = $("#nav").offset().left;导航距离屏幕左侧距离
    //IE6不认识position:fixed,单独用position:absolute模拟

    if($.browser.msie && $.browser.version=="6.0"){
    $("#nav").css({'position':'absolute','top':eval(document.documentElement.scrollTop),'left':leftWidth(),'z-index':99999});
    //防止出现抖动
    $("html,body").css({'background-image':'url(images/bg.jpg)','background-attachment':'fixed'});
    }else{
    $("#nav").css({'position':'fixed','top':0,'left':leftWidth(),'z-index':99999});
    }
    }else{
    $("#nav").css({'position':_position,'top':_top,'left':_left,'z-index':_zIndex});
    }
    });})

    </script>

  • 相关阅读:
    1055. [HAOI2008]玩具取名【区间DP】
    BZOJ2435:[NOI2011]道路修建 (差分)
    1084. [SCOI2005]最大子矩阵【网格DP】
    1060. [ZJOI2007]时态同步【树形DP】
    1050. [HAOI2006]旅行【并查集+枚举】
    2463. [中山市选2009]谁能赢呢?【博弈论】
    luogu P1195 口袋的天空
    luogu P1162 填涂颜色
    luogu P1223 排队接水
    luogu P1331 海战
  • 原文地址:https://www.cnblogs.com/ihqn19/p/2258539.html
Copyright © 2011-2022 走看看