脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery网页顶部固定导航效果

jQuery实现网页顶部固定导航效果代码

 更新时间：2015年12月24日 11:42:08   作者：cui_angel  
这篇文章主要介绍了jQuery实现网页顶部固定导航效果代码,涉及jQuery响应scroll事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现网页顶部固定导航效果代码。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

<!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>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
$(function(){
  $("#wrap ul li ").css("width",760 / $("#wrap ul li").size());
  $(window).scroll(function(){
  var h = $(this).scrollTop()+2;
  $("#wrap").css("top",h);
  });
  $("#wrap ul li:even").css("background","#ddd")
  $("#wrap ul li").hover(function(){$(this).css("background","#0f0");},function(){$(this).css("background","");});
});
</script>
<style type="text/css">
#wrap{position:absolute; top:2px; left:0px; width:100%; height:20px; background:#f00;}
#wrap ul{list-style:none; width:760px; margin:0 auto; padding:0; background:#fff;}
#wrap ul li{float: left; text-align:center;}
#test{height:2000px; background:#f0f; margin:0; padding:0; border:1px solid black;}
</style>
</head>
<body>
<div id="wrap">
<ul>
<Li>首页</Li>
<li>图片</li>
<li>新闻</li>
<li>软件</li>
<li>图片</li>
<li>新闻</li>
<li>软件</li>
<li>图片</li>
<li>新闻</li>
<li>软件</li>
</ul>
</div><div id="test"></div>
</body>
</html>

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

您可能感兴趣的文章:

相关文章

  • Jquery下判断Id是否存在的代码

    Jquery下判断Id是否存在的代码

    Jquery下判断Id是否存在的代码，需要的朋友可以参考下。
    2011-01-01
  • jquery图片不完全按比例自动缩小的简单代码

    jquery图片不完全按比例自动缩小的简单代码

    开发前期用自动生产 固定大小的图片 进行 显示，发现不能满足，在前期的时候把保存了原图，现在只能显示原图，原图由于上传时候没有做任何限制所有要使用 图片不完全按比例缩小，下面是代码
    2013-07-07
  • 全面解析标签页的切换方式

    全面解析标签页的切换方式

    这篇文章主要介绍了标签页的切换方式,介绍的非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • jQuery处理XML文件的几种方法

    jQuery处理XML文件的几种方法

    这篇文章主要为大家详细介绍了jQuery处理XML文件的几种形式方法,如何使用jQuery解析XML，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • jQuery Validate表单验证入门学习

    jQuery Validate表单验证入门学习

    这篇文章主要介绍了jQuery Validate表单验证入门知识，该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • jQuery EasyUI中对表格进行编辑的实现代码

    jQuery EasyUI中对表格进行编辑的实现代码

    对表格进行增删改后一次性保存或回滚的发生相当有用。参照官方的教程例子做了个用户管理的小例子。
    2010-06-06
  • jQuery位置选择器用法实例分析

    jQuery位置选择器用法实例分析

    这篇文章主要介绍了jQuery位置选择器用法,结合实例形式分析了jQuery位置选择器的功能、用法及相关操作注意事项,需要的朋友可以参考下
    2019-06-06
  • jQuery 3.0 的 setter和getter 模式详解

    jQuery 3.0 的 setter和getter 模式详解

    这篇文章主要介绍了jQuery 3.0 的 setter和getter 模式详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • jQuery的初始化与对象构建之浅析

    jQuery的初始化与对象构建之浅析

    之前本人的工作和学习多以原生js 为主，对jQuery 一直都不是很了解，但jQuery 作为当今最优秀的js 类库之一，必须是要花时间好好学习下的，今天正好蛋疼，读了里面一些代码
    2011-04-04
  • jQuery 动态云标签插件

    jQuery 动态云标签插件

    这里推荐给大家一款jquery动态云标签的插件，非常的炫，在指定块级元素内动态生成a标签，a标签的高度、宽度、位置、层数、背景颜色随机可控，a标签渐隐显示和渐隐消失，可改变初始化的透明度，鼠标悬浮停止动画且透明度最大，层数最高，鼠标离开，恢复之前状态
    2014-11-11

最新评论