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">
<head>
<meta charset="UTF-8">
<title>【推荐】Jquery+CSS3仿花瓣网固定顶部位置悬浮的导航菜单</title>
<style type="text/css">
body,h1,ul{margin:0;}
ul li{list-style-type:none;}
#header{width:100%;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;text-align:center;}
h1{padding:10px 0;color:#D74452;}
.nav{width:1000px;background:#fff;margin:20px auto 0;border:solid 1px #ccc;zoom:1;border-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,0.1);color:#D74452;}
.nav_scroll{position:fixed;width:100%;margin:0;left:0;top:0;}
.nav:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.nav ul li{float:left;margin:0 20px;height:30px;line-height:30px;}
.nav ul li a{cursor:pointer;}
.nav ul li a:hover{text-decoration:underline;}
h2{height:400px;line-height:400px;}
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 var topMain=$("#header").height()+20//是头部的高度加头部与nav导航之间的距离
 var nav=$(".nav");
 $(window).scroll(function(){
 if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除
  nav.addClass("nav_scroll");
 }else{
  nav.removeClass("nav_scroll");
 }
 });
})
</script>
</head>
<body>
<div id="header"><h1>花瓣</h1></div>
<div class="nav">
  <ul>
    <li><a>关注</a></li>
    <li><a>最新</a></li>
    <li><a>最热</a></li>
    <li><a>视频</a></li>
    <li><a>家居</a></li>
    <li><a>旅行</a></li>
  </ul>
</div>
<div style="background:#f9f9f9;color:#000;" id="cont">
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
</div>
</body>
</html>

运行效果图如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • jquery实现的让超出显示范围外的导航自动固定屏幕最顶上

    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实现网页顶部固定导航效果代码

    本文实例讲述了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 顶部导航跟随滚动条滚动固定浮动在顶部

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

  • jQuery实现智能判断固定导航条或侧边栏的方法

    jQuery实现智能判断固定导航条或侧边栏的方法

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

  • jQuery导航条固定定位效果实例代码

    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.Pin垂直滚动时固定导航

    使用jQuery.Pin垂直滚动时固定导航

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

  • jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

    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实现带延迟效果的滑动菜单代码

    jQuery实现带延迟效果的滑动菜单代码

    本文实例讲述了jQuery实现带延迟效果的滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的滑动菜单,鼠标移到某菜单项上,菜单的背景可以滑动过来,平滑的滑动效果,炫动的导航效果,相比没有动画的菜单,这款菜单真的挺不错哦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • 使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效

    使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效

    这是一款仿windows10开始菜单的下拉导航菜单特效.该下拉菜单使用jQuery和CSS3来完成类似windows10开始菜单样式效果,它的代码简洁,效果非常时尚. 查看演示      源码下载 该下拉菜单的HTML结构非常简单,基本的HTML结构如下: <div id="top-bar" class="top-bar"> <div class="bar"> <button id="navbox-trig

  • jQuery/CSS3图片特效插件整理推荐

    jQuery/CSS3图片特效插件整理推荐

    1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网站登录页面特效源码,是一段实现页面底部拥有滚动云彩动态效果的特效源码,想要在网站中实现此类效果的朋友们可以前来下载使用.本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 在线演示 源码下载 2.HTML5实现的3D球体斑点运动动画特效源码 这是一个很酷的HTML5 3D动画效果,是一个小球,小球表面出现跳动的斑点,斑点跳动时形成各种各样的形状,其实这款动画并不是正宗的HTML5 3D动画,而是

  • 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/xh

  • jQuery实现二级导航菜单的示例

    实用JQ实现导航二级菜单效果,导航菜单在网站中非常常见,有的网站可能会出现三级菜单及多级菜单模式,下面我们来简单的实现一个二级菜单的效果. 部分效果截图: 整体代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航菜单案例</title> <style> *{ padding: 0; margin: 0; } ul,li{ l

  • 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"> <he

  • jquery+css3实现网页背景花瓣随机飘落特效

    jquery+css3实现网页背景花瓣随机飘落特效

    飘花效果的实现--效果图: 查看演示  源码下载 需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 http://github.com/rstacruz/jquery.transit jquery对一些效果的扩展 飘花的效果稍微复杂一点,有一定量的JavaScript代码,通过JS+CSS3的组合实现的.观察右边效果,可以大致分解飘花的实现 飘花比人物的层级都高       飘花数量非常多       飘花会有一定的轨迹运动       飘花带有渐变的

  • jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)

    jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)

    本文实例讲述了jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换).分享给大家供大家参考,具体如下: 这里介绍的jQuery拉动页面固定顶部显示,及自动消失效果,可能ie浏览器下有问题,不过火狐什么的都可以运行看效果,一个简单的网页特效,也是很常用的"回到顶部"效果,有兴趣的看一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fix-top-cha-show-codes/ 具体代码如下: <!DOC

  • Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)

    Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)

    使用ViewPager,PagerSlidingTabStrip,SwipeRefreshLayout打造一款可以点击可以侧滑的顶部导航栏. 先简单介绍一下所用的两个个开源库. PagerSlidingTabStrip Github地址 用法: 1.向app Module中的build.gradle中添加依赖 dependencies { compile 'com.astuetz:pagerslidingtabstrip:1.0.1' } 2.把PagerSlidingTabStrip这个控件添

随机推荐