html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果

今天做了个固定定位的效果。比如对导航需要进行固定定位效果：当没有滚动到导航下面，导航正常显示。当滚动到导航下面，导航就固定到顶部。

一、css部分：

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

二、这个效果使用了jquery的方法实现，具体思路为：

1、首先获得已经滚动上去的高度

2、让导航条固定定位如果t>139加f这个Class,让它有定位

3、如果小于或等于139,取消f这个Classhtml>

padding: 0;

margin: 0;

}

img{

display: block;

margin: 0 auto;

}

img#menu.f{

position: fixed;

left: 50%;

margin-left: -602px;

top: 0;

}

$(function(){

//给浏览器加滚动条事件

$(window).scroll(function(){

//获得已经滚动上去的高度 document页面文档区域 window也可以

var t = $(document).scrollTop();

document.title = t;

if (t>139) {

//让导航条固定定位 fixed:固定的向左留50%(一半的距离有居右的效果)，然后这个图片是1204px宽度，图片在右，向左是负的()图片一半602px，达到居中效果

//$('#menu').css({'position':'fixed','top':'0','left':'50%','margin-left':'-602px'})

//让导航条固定定位如果t>139加f这个Class,让它有定位

$('#menu').addClass('f');

}else{

//如果小于或等于139,取消f这个Class

$('#menu').removeClass('f');

}

})

html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果相关推荐

jQuery 导航条置顶滚动渐变背景透明度
思路1 顶部导航条的背景透明度随着滚动条滚动的像素增加或者减少思路2 只要滚动条的像素大于0 就给背景透明度1 然后再给个transitionshijian也有过度效果问题1 顶部导航条要使用 ...
html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件
这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件.我们曾经在很多网站上都看到过这种顶部固定导航菜单特效.Disqus For Websites的导航菜单就是一个很好的例子. HTML结 ...
html中导航条置顶的代码,一个DIV+CSS代码布局的简单导航条
一个蓝色主题的导航条结构案例,本CSS小实例,采取DIV CSS实现.同时不必图片做靠山,直接运用布景致完成,鼠标经由过程悬停对应栏目称说是对应背景蓝色变深. 导航条一小块成就截图通常导航条接纳ul ...
html中导航条置顶的代码6,JS+CSS实现六级网站导航主菜单效果
本文实例讲述了JS+CSS实现六级网站导航主菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现支持6级的网站导航主菜单,级级相信够大家用了,外观蓝色风格,也是使用最多的一种菜单颜色, ...
随着滚动条下拉，导航栏置顶
随着滚动条下拉,导航栏置顶想做一个这样的效果,当我们下拉滚动条时,写的导航栏置顶. 这是效果图先学习用到的基本知识 jQuery CSS 操作 - scrollTop() 方法 scrollTop ...
如何构建顶部导航条_如何构建导航栏
如何构建顶部导航条导航栏 (Navigation Bars) Navigation bars are a very important element to any website. They pr ...
html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例
本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: $.fn.smartFloat = function () { var posi ...
html 导航栏选中状态,jQuery“导航栏点击选中效果“代码
现在的网站菜单导航栏几乎都有点击选中效果,正好今天我在开发项目中也需要用上这样的效果,下面就给大家分享一下,亲测有效,大家放心使用. 1.引入jQuery核心文件 2.加入"jQuery导航 ...
html5导航栏悬浮置顶,jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单...
本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/D ...

html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果

html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果相关推荐

最新文章

热门文章