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

2024-03-24 14:57:47

本文实例讲述了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.Pin垂直滚动时固定导航

ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQuery.Pin,这个插件可在用来固定页面中的元素. http://webpop.github.io/jquery.pin/ 添加脚本向页面中添加脚本,使用 jquery.pin 来固定导航.为了减少添加脚本的次数,可以将脚本添加到布局中,这样所有使用该局的页面都会应用到. 1. 布局组件 -> 默认
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上

其实实现起来并不难,我们先把实现流程大致想一下,首先,如果导航在显示范围内,就不用做修改.当导航超出显示范围,也就是导航距离屏幕顶部的距离小于0的时候,我们要让它浮动在屏幕顶上,然后大于0的时候,进行一个复原操作,原理就是这么简单,大致看下效果图吧复制代码代码如下: $().ready(function(){ //导航距离屏幕顶部距离 var _defautlTop = $("#navigator").offset().top - $(window).scrollTop(); //
jquery实现的导航固定效果

jquery实现的导航固定效果复制代码代码如下: 1.jquery代码, .nav为导航的class$(function(){ $(window).scroll(function() { if($(window).scrollTop()>=250){ $(".nav").addClass("fixedNav"); }else{ $(".nav").removeClass("fixedNav"); } })
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/
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: <!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导航条固定定位效果实例代码

实现效果图: 向下滑动时,导航栏固定代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ display: block; margin: 0 auto; } img#search
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

复制代码代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>
jQuery实现智能判断固定导航条或侧边栏的方法

本文实例讲述了jQuery实现智能判断固定导航条或侧边栏的方法.分享给大家供大家参考,具体如下: 这是一个jQuery智能判断固定DIV层的特效代码,通过这个jQuery智能代码,你可以设置导航栏.侧边栏.任何DIV层的固定显示:现在蓝叶的站就用的这个jQuery智能判断固定的导航条,要看演示的就请下拉页面滚动条,就会看到导航条固定了:使用这个代码需要在页面里引用jQuery库的JS文件,现在的网站一般都引用了jQuery库代码,如果没有那就打开你网站的模板,在页头或者页位加上<script s
jQuery实现仿百度帖吧头部固定导航效果

本文实例讲述了jQuery实现仿百度帖吧头部固定导航效果.分享给大家供大家参考.具体如下: 这里使用jquery实现网页上的头部固定,但不随滚动条滚动的效果,在百度贴吧里整理出来的网页特效,最开始的时候,固定条可以随滚动条拖动至网页顶部,但到达网页顶部后,再次拖动滚动条,头部并不滚动,其它的内容可以滚动,貌似在网上见的挺多的效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
基于jquery的仿百度的鼠标移入图片抖动效果

1.查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息.这样就断定代码在另一个页面中.于是想当然的以为是用的框架连接的地址.结果没查到,却看到了一个这样的信息: 复制代码代码如下: <div id ="task-intro-box"></div> <div id ="task-awards"></div> <div id ="
基于jQuery实现仿百度首页换肤背景图片切换代码

不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦- 在线预览源码下载 html代码: <a href="#">换肤</a> <div class="heitiao"></div> <div class="con"><img src="images/content.png" /></div> &l
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

本文实例讲述了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码.分享给大家供大家参考.具体如下: 这是一款仿百度首页jQuery滑动伸缩展开的添加服务效果,其实是一款伸缩菜单,只不过这个菜单有点特别,只从一头向另一头伸展出去,菜单的伸缩效果平滑,设计精美. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-index-show-serv-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI
基于jQuery实现仿百度首页选项卡切换效果

以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&
Android仿百度外卖自定义下拉刷新效果

现如今的APP各式各样,同样也带来了各种需求,一个下拉刷新都能玩出花样了,前两天订饭的时候不经意间看到了"百度外卖"的下拉刷新,今天的主题就是它–自定义下拉刷新动画. 看一下实现效果吧: 动画我们先来看看Android中的动画吧: Android中的动画分为三种: Tween动画,这一类的动画提供了旋转.平移.缩放等效果. Alpha – 淡入淡出 Scale – 缩放效果 Roate – 旋转效果 Translate – 平移效果 Frame动画(帧动画),这一类动画可以创建一个D
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)

本文实例讲述了PHP实现仿百度文库,豆丁在线文档效果.分享给大家供大家参考,具体如下: 由于项目要实现类似百度文库的功能,又是我一个人做的项目,所以就想到找免费的现成的来使用.在网上找到的都是一样的.如下: Flash Paper支持Office文档(.doc,.xls,.ppt)直接转换为PDF或SWF,速度很快,效果较好.可惜,Flash Paper V2.2后没有再更新了.安装Flash Paper后,可以直接使用命令调用FlashPrinter.exe,实现批量转换. 例如:C:\Fla
基于Jquery实现仿百度百科右侧导航代码附源码下载

先给大家展示下效果图,看看是不是亲想要实现的效果,如果还满意的话请查看本文详情,同时大家也可以下载源码哦. 效果图: 效果展示源码下载代码说明: 仿百度百科右侧导航代码jquery插件,这个仿百科右侧导航js代码,在很久以前就像搞个用了,因为这个导航特别适合长篇文档使用,花了半天时间写了这个仿百科导航插件,不过和百度百科比起来还是有点弱,没有实现右侧导航区域滚动的功能,如果您的文档不是超级变态长,应该够用. 如果你的导航超级长,可能要用到侧边导航页可以滚动,一般情况下还是用不到,等过些时候
jQuery 插件仿百度搜索框智能提示(带Value值)

因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的所以做了个. 直接贴代码. 复制代码代码如下: (function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete = function(config) { c = $(this); var defaults = { width: c.width(), //提示框的宽度默认跟

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

相关推荐

随机推荐