浮动导航

//初始化全局变量GLOBAL.onscrollY.thisy【滚动的高度】
GLOBAL.namespace('onscrollY'); 
GLOBAL.onscrollY.thisy=0;

$(window).resize(function(){
    GLOBAL.onscrollY.thisy = (document.body.scrollTop||document.documentElement.scrollTop);
});
$(window).scroll(function(){
    GLOBAL.onscrollY.thisy = (document.body.scrollTop||document.documentElement.scrollTop);
});
//【floatMenu】超过【Gover】时增加类【onFloat】——可用于浮动导航 

//实例调用 onFixed('.floatMenu','#Gover','onFloat');



function onFixed(floatMenu,Gover,onClass){
    this.floatMenu=$(floatMenu);
    this.Gover=$(Gover);
    this.onClass=onClass;
    $(window).scroll(function(){
        if( GLOBAL.onscrollY.thisy >this.Gover.offset().top ){    
            this.floatMenu.addClass(this.onClass);
        }else{
            this.floatMenu.removeClass(this.onClass);
        }
    });
}
更多相关文章
  • CSS如何让浮动导航栏元素居中显示:制作导航栏是最为基础的布局技能之一,当然对于稍有经验的人员来说没有任何问题,不过对于初学者可能会有一定的困扰.普通的导航栏一般具有一下几个特点,整个导航栏居中,导航栏目具有,并且能够均匀分布,下面就是一个这样的简单代码实例.代码如下: ; } </style ...
  • 这个东西其实理解了很好懂的,就是position:fixed的应用 例子如下: <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8">< ...
  • jQuery页面滚动右侧浮动导航切换
    体验效果:http://hovertree.com/texiao/jquery/49/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
  • 解决embed标签显示在div上层转藏
    解决embed标签显示在div上层,非设置z-index 今天给屌炸了爆笑网增加了视频栏目,但是发现在IE8中,顶部浮动导航的div在移动到embed视频上时,总是被embed的flash文件盖住.分别修改导航div和embed的z-index值仍然无法解决,很是郁闷. 结合之前有过此类遭遇的经验, ...
  • 前端性能高性能滚动scroll及页面渲染优化
    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以 ...
  • 今天给网站增加了视频栏目,但是发现在IE8中,顶部浮动导航的div在移动到embed视频上时,总是被embed的flash文件盖住.分别修改导航div和embed的z-index值仍然无法解决,很是郁闷.结合之前有过此类遭遇的经验,慢慢摸索了半小时,意识到并非z-index的问题,问题应该是出在em ...
  • <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Cont ...
  • 废话不多说,直接上代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q ...
一周排行
  • linuxntp服务器,时间同步
    周氏一族,整理技术文档,给下一代留点教程......公司服务器较多,各种服务分布式管理,所 ...
  • 设计模式之策略模式
    设想有一个游戏,游戏中有各种鸭子,它们可以飞,也可以呱呱叫.这样一个游戏该怎样设计呢? 一 ...
  • Chrome开发者工具不完全指南(一.基础功能篇) Chrome开发者工具不完全指南(二.进阶篇) Chrome开发者工具不完全指南:(三.性能篇) Chrome开发者工具不完全指南(四.性能进阶篇) Chrome开 ...
  • Oracle11gR2学习之二创建数据库及OEM管理篇
    Oracle安装完毕来创建一个数据库,创建之前必须先配置数据库的监听端口,否则会创建过程中 ...
  • 前言随着业务的发展单库中的分表的数量越来越多, 使用在单库上存放过多的表这样是不合理的.因此,我们就需要考虑将数据根据数据库进行拆分.一般mysql不建议表的数量超过1000个.当然,这不能一概而论,还需要根据你的数 ...
  • 现在发现用易语言的人还真不少.以前用过不少编程语言.现在对这个较感兴趣.准备花一个星期的时间.每天晚上学习.把这个语言学会.做一个自己的软件.
  •          静态路由概述 动态路由通过路由器交换路由信息可以适应网络的拓扑变化. 
  • WP8.1开发RenderTargetBitmap类的特殊用途
    相信,耍过WPF的人都知道RenderTargetBitmap这个玩意儿,这家伙比较有意思 ...
  • 1:Access Point(纯AP模式) 工作在纯AP接入点模式,和普通的AP是一样的,支持802.11b 11MBps或802.11b+ 22MBps的无线网卡接入.(AP模式可以比Linksys的WET11的点 ...
  • DirectAccess部署(一)之DirectAccess介绍及部署要求(多图)
    DirectAccess典型部署示意图DirectAccess客户端建立连接过程1. 客户 ...