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

jQuery实现仿百度帖吧头部固定导航效果

 更新时间：2015年08月07日 15:21:10   作者：皮蛋  
这篇文章主要介绍了jQuery实现仿百度帖吧头部固定导航效果,涉及jquery针对页面高度计算与样式的动态添加及删除技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了jQuery实现仿百度帖吧头部固定导航效果。分享给大家供大家参考。具体如下：

这里使用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 src="jquery-1.6.2.min.js"language="javascript" type="text/javascript"></script>
<script>
$(function(){  
 $(window).scroll(function() {
  //$("body").css({"background-position":"center "+$(window).scrollTop()+""});
  if($(window).scrollTop()>=250){
    $(".nav").addClass("fixedNav");
  }else{
    $(".nav").removeClass("fixedNav");
  } 
 });
});
</script>
<style>
*{
  margin:0px;
  padding:0px;
}
div.nav{
  background:#000000;
  height:57px;
  line-height:57px;
  color:#ffffff;
  text-align:center;
  font-family:"微软雅黑", "黑体";
  font-size:30px;
}
div.fixedNav{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  z-index:100000;
  _position:absolute;
  _top:expression(eval(document.documentElement.scrollTop));
}
</style>
</head>
<body> 
<div class="header" style="background:#CCCC00;height:250px;"></div>
<div class="nav">
<p>导航固定</p>
</div>
<div class="content" style="background:#0099FF; height:2000px;"></div>
</body>
</html>

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

您可能感兴趣的文章:

相关文章

  • jQuery之网页换肤实现代码

    jQuery之网页换肤实现代码

    用jQuery做网页换肤确实是很一个很巧妙，很好的选择，这是本人在学习jQuery中学的知识，感觉很有用，写了下来，希望大家有更好的方法或者代码不足的地方请谅解，本人也是初学者啊，希望大家互相勉励互相学习。
    2011-04-04
  • 基于jQuery实现左右div自适应高度完全相同的代码

    基于jQuery实现左右div自适应高度完全相同的代码

    最近做前端设计时需要使左右两个DIV高度自适应。这其中的jquery代码中的获得高度用的clientHeight，介绍一下几种不同的获得方式以及他们的差别
    2012-08-08
  • jqeury eval将字符串转换json的方法

    jqeury eval将字符串转换json的方法

    这个方法是一个将DataTable转换成字符串的方法 。
    2011-01-01
  • 基于jQuery实现仿51job城市选择功能实例代码

    基于jQuery实现仿51job城市选择功能实例代码

    这篇文章主要介绍了基于jQuery实现仿51job城市选择功能实例代码的相关资料,需要的朋友可以参考下
    2016-03-03
  • Jquery鼠标放上去显示全名的实现方法

    Jquery鼠标放上去显示全名的实现方法

    下面小编就为大家带来一篇Jquery鼠标放上去显示全名的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • jQuery中andSelf()方法用法实例

    jQuery中andSelf()方法用法实例

    这篇文章主要介绍了jQuery中andSelf()方法用法,实例分析了andSelf()方法将先前所选的元素加入当前元素集合中的使用技巧,需要的朋友可以参考下
    2015-01-01
  • bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码

    bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码

    这篇文章主要介绍了bootstrapValidator表单校验、更改状态、新增、移除校验字段,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-05-05
  • jQuery常用选择器详解

    jQuery常用选择器详解

    这篇文章主要为大家详细介绍了jQuery常用选择器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Jquery Ajax Error 调试错误的技巧

    Jquery Ajax Error 调试错误的技巧

    jquery在程序开发ajax应用程序时提高了效率，减少了需要兼容性的问题，当我们在ajax项目中，遇到ajax异步获取数据出错该怎么解决呢，我们可以通过捕捉error事件来获取出错的信息，本文给大家介绍jquery ajax error调试错误的技巧，感兴趣的朋友一起学习吧
    2015-11-11
  • jQuery插件实现非常实用的tab栏切换功能【案例】

    jQuery插件实现非常实用的tab栏切换功能【案例】

    这篇文章主要介绍了jQuery插件实现非常实用的tab栏切换功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-02-02

最新评论