菜单滚动至顶部后固定

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>菜单滚动至顶部后固定-柯乐义</title>
<style type="text/css">
.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
.header{height:150px;}
#nav_keleyi_com{padding:10px;position:relative;top:0;background:#125430;width:1000px;}
a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div id="nav_keleyi_com">
<a href="http://keleyi.com/menu/net/" target="_blank">.NET</a>
<a href="http://keleyi.com/menu/javascript/" target="_blank">Javascript</a>
<a href="http://keleyi.com/menu/jquery/" target="_blank">jQuery</a>
<a href="http://keleyi.com/menu/csharp/" target="_blank">C#</a>
<a href="http://keleyi.com/menu/other/" target="_blank">其他</a>
<a href="http://keleyi.com/" target="_blank">首页</a><a href="/menu/aspnet/"

target="_blank">ASP.NET</a> <a href="/menu/mvc/" target="_blank">MVC</a></div>
</div>
<script type="text/javascript" >
function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;

window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < height){
obj.style.position = ‘relative‘;
}else{
obj.style.position = ‘fixed‘;
}
}
</script>
<script type="text/javascript">
window.onload = function(){
menuFixed(‘nav_keleyi_com‘);
}
</script>
</body>
</html>

此文摘要自:http://keleyi.com/a/bjac/5d7f4ac2efa72d30.htm

时间: 2024-11-03 05:30:02

菜单滚动至顶部后固定的相关文章

JS 实现DIV 滚动至顶部后固定

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>DIV滚动至顶部后固定</title> </head> <body style="height:2000px;"> <div style="height: 200px"></div> <div id=&q

当导航条滚动到顶部时固定到顶部

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' /> 5 <!-- js引用包 --> 6 <script src='http://libs.baidu.com/jquery/1.9.0/jquery.min.js'></script> 7 8 <style> 9 html,body,div,span,applet,object,ifram

div滚动到页面顶端后固定住(转)

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>滚动至顶部后固定</title> <style type="text/css"> .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;} .header{height:150p

div滚动到页面顶端后固定住

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>滚动至顶部后固定</title> <style type="text/css"> .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;} .header{height:150p

一款基于jquery滑动后固定于顶部的导航

之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1> Scroll down</h1> <h2> And watch the menu bar</h2> <nav id="menu"> <h1 id="site

滚动到顶部固定

1 // 滚动到顶部固定 2 var navH = $(".fixedTop").offset().top; 3 $(".fixedTop").wrap("<div class='background-fixed'></div>"); 4 $('.flowDev').scroll(function () { 5 var scroH = $('.flowDev').scrollTop(); 6 if (scroH >=

JavaScript目录菜单滚动反显组件的实现

原文:JavaScript目录菜单滚动反显组件的实现 JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一个高亮样式 这个功能可以很方便的提醒用户目前所浏览的位置,有时目录菜单还会设计为滚动时一直固定在指定位置. 以下为此类功能的应用示例: 1. 京东团购首页左侧导航菜单 2. 京东图书详细页右侧图书目录导航 3. 京东团购品牌惠楼层分类菜单 实现思

jquery实现平滑滚动到顶部、底部、或者指定位置(个人随笔)

个人随笔,欢迎指教. 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery实现平滑滚动到顶部.底部.或者指定地方</title> <script type="text/javascript" src="JavaScript/jquery-1.11.2.min.js"><

iOS菜单滚动联动内容区域功能实现

平时开发APP中关于此功能还是比较经常碰到,本实例借用三个开源的插件,并对其中一个进行修改调整实现出想要的效果:本文重点介绍修改的内容跟三个插件的运用,这三个插件还可以各自扩展到其它项目的运用: 效果图: 本实例实现的效果:顶部的滚动菜单显示出所有的类型,每个类型都对应一种展示,可以在顶部的菜单进行滚动,内容区域也会跟着改变,或者是内容区域左右滑动,则顶部的滚动菜单也会跟着更改,顶部菜单的最右边有一个展示更多菜单的效果,用于弹出一个带箭头的窗:(源代码下载) 带箭头的弹出视图插件 :https: