jQuery仿gmail实现fixed布局的方法

本文实例讲述了jQuery仿gmail实现fixed布局的方法。分享给大家供大家参考。具体实现方法如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fixed bar demo</title>
<style type="text/css" media="screen">
body{
margin:0;
height:2000px;
}
#top{
background-color:#333;
height:80px;
}
#nav{
background-color:#999;
height:30px;
position:absolute;
top:80px;
width:100%;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $(window).scroll(function(){
 var scrollTop = $(window).scrollTop();
 if(scrollTop < 80)
 $("#nav").css('top', '80px');
 else
 $("#nav").css('top', scrollTop +'px');
 });
});
</script>
</head>
<body>
<div id="top">
</div>
<div id="nav">
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • CSS中position属性之fixed实现div居中

    CSS中position属性之fixed实现div居中

    position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 上下左右 居中 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即

  • PHP SPL标准库之SplFixedArray使用实例

    SplFixedArray主要是处理数组相关的主要功能,与普通php array不同的是,它是固定长度的,且以数字为键名的数组,优势就是比普通的数组处理更快. 看看我本机的Benchmark测试: ini_set('memory_limit','12800M'); for($size = 10000; $size < 10000000; $size *= 4) { echo PHP_EOL . "Testing size: $size" . PHP_EOL; for($s = m

  • 简介JavaScript中fixed()方法的使用

    此方法会导致就好像它是在一个<tt>的标签被显示在固定间距的字体的字符串. 语法 string.fixed( ) 下面是参数的详细信息: NA 返回值: 返回字符串的<tt>标签 例子: <html> <head> <title>JavaScript String fixed() Method</title> </head> <body> <script type="text/javascrip

  • Web移动端Fixed布局的解决方案

    Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码) <body> <!-- fixed定位的头部 --> <header

  • jQuery实现的fixedMenu下拉菜单效果代码

    jQuery实现的fixedMenu下拉菜单效果代码

    本文实例讲述了jQuery实现的fixedMenu下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了仿Google风格的下拉菜单,其核心实际上是jquery.fixedMenu菜单,使用了jquery.fixedMenu.js和fixedMenu_style.css文件,已在代码中加注释,你可以从本代码中分享现这两个文件,然后重新引用.本菜单在鼠标点击主菜单的时候可向下显示二级子菜单,在火狐或Chrome浏览器下,还可显示菜单阴影效果. 运行效果截图如下: 在线演示地址如下: htt

  • jQuery仿gmail实现fixed布局的方法

    本文实例讲述了jQuery仿gmail实现fixed布局的方法.分享给大家供大家参考.具体实现方法如下: <!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"

  • JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

    JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

    在jQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置布局. 经实验,新版本的JQuery EasyUI中布局可以采用以下方式来达到自动适应大小: 首先设置样式,使html和body高度为100%(因form和div高度设置为100%需要继承上级): <style type="text/css"> html,body { heig

  • jQuery实现仿Google首页拖动效果的方法

    本文实例讲述了jQuery实现仿Google首页拖动效果的方法.分享给大家供大家参考.具体如下: 这里用jQuery.js库写了一个仿Google首页拖动的特效代码 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>用JQUERY实现的仿Googl

  • jQuery仿写百度百科的目录树

    jQuery仿写百度百科的目录树

    一.首先来看一下需求(截图为百度百科"医保"词条): 1.点击右侧的目录树,左侧跳转到指定的锚点位置: 2.滚动鼠标,游标跟随一起滚动至响应链接位置 二.实现思路 1.针对第一个需求,只需要设置游标所在div和右侧列表div的position为fixed,根据浏览器窗口定位,然后给左侧文章各区块增加id,为右侧列表每一项增加对应的href属性指向响应的锚点即可: 2.针对第二个需求,定义鼠标的滚动事件mousewheel(在ff下事件为DOMMouseScroll),当时自己琢磨了半天

  • jquery仿京东侧边栏导航效果

    jquery仿京东侧边栏导航效果

    本文实例为大家分享了jquery仿京东侧边栏导航的具体代码,供大家参考,具体内容如下 样式代码 <style> *{ padding: 0; margin: 0; border: 0; } body{ height: 2000px; } .right_ng{ width: 40px; height: 100%; position: absolute; position: fixed; right: 0px; background: #666666; } .sign{ width: 40px;

  • jQuery插件artDialog.js使用与关闭方法示例

    本文实例讲述了jQuery插件artDialog.js使用与关闭方法.分享给大家供大家参考,具体如下: 子窗口关闭artdialog终极解决方案: window.parent.window.art.dialog({ id: 'qin123' }).close(); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • 完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效

    1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.运行环境 IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现 4.所有图片

  • jQuery仿IOS弹出框插件

    jQuery仿IOS弹出框插件

    这款弹出框插件是本人自己模仿IOS原生弹出框写的一个自定义插件,包括Alert弹出框和Confirm确认框,支持标题,内容,按钮文字以及按钮回调函数自定义,使用非常简单,可以进行扩展,下面是插件使用方法,一看就懂: 首先导入jquery库和插件库以及css文件 <script src="./jquery-1.8.3.min.js"></script> <script src="./jquery.confirm-1.1.js">&l

  • jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

    jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

    在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div

  • jQuery仿Flash上下翻动的中英文导航菜单实例

    本文实例讲述了jQuery仿Flash上下翻动的中英文导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/1

随机推荐