<!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>

div滚动到页面顶端后固定住的更多相关文章

  1. Jquery DIV滚动至浏览器顶部位置固定

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { v ...

  2. JS实现菜单滚动到一定高度后固定

    在有些网页中我们会发现会有这样的现象:某个div会随着屏幕的滚动达到一定高度的时候位置就固定下来了.例如一下导航条: 那么这里就需要用到JS的逻辑方法来实现了. html <div id=&qu ...

  3. Jquery DIV滚动至浏览器顶部后固定不动代码

    $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".win").offset().top; //滚动条事件 $(window).scr ...

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

    JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...

  5. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  6. 禁止body滚动允许div滚动防微信露底

    最近遇到一个需求,页面中只有一个div允许滚动,其他内容不允许滚动. 正常来讲加上 body{height:100%;overflow: hidden;} 应该就阻止页面滚动了.可是很悲催的是手机端并 ...

  7. 使用Div + CSS布局页面

    在设计网页时,能够控制好各个模块在页面中的位置是非常关键的.本章将讲解利用Div+CSS对页面元素进行定位的方法. Div是HTML中指定的专门用于布局设计的容器对象 Div是CSS布局的核心对象. ...

  8. 基础业务：滚动到指定位置导航固定（CSS实现）

    最近公司做的业务都是使用Vue.Element写的,涉及到的相应的基础业务像轮播.预加载.懒加载,都是使用 NPM上的工具来实现,原理和基础还是要有的,就来实现几个项目中常用到的业务. 经常见到这样的 ...

  9. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

随机推荐

  1. XMLHttpRequest 对象

    XMLHttpRequest 对象 XML XSLTXML 解析器XMLHttpRequest 对象用于在后台与服务器交换数据. 什么是 XMLHttpRequest 对象? XMLHttpReque ...

  2. oracle 自定义异常处理

    --第一种方式:使用raise_application_error抛出自定义异常declare i number:=-1;begin if i=-1 then raise_application_er ...

  3. 史上最全Java表单验证封装类

    package com.tongrong.utils; import java.util.Collection; import java.util.Map; import java.util.rege ...

  4. sql 操作，

    SELECT * FROM dbo.tbl_Web_Photos AS pt LEFT JOIN dbo.tbl_Web_Friends AS fd ON pt.user_email=fd.AddEm ...

  5. LitDB文章

    阅读目录 1.LiteDB初步介绍 2.LiteDB使用基本案例 3.LiteDB的技术细节 4.资源其他 今天给大家介绍一个不错的小巧轻量级的NoSQL文件数据库LiteDB.本博客在2013年也介 ...

  6. (转)JS保留两位小数 四舍五入函数

    本文转载自:http://www.cnblogs.com/446557021/archive/2011/10/13/2211047.html js 四舍五入函数 toFixed(),里面的参数 就是保 ...

  7. for name in loop Shell

    for NAME in joe jane juliedoADDRESS="$NAME@example.com"MESSAGE='Projects are due today!'ec ...

  8. 微软为Visual Studio开发助手拓展C++支持

    近日,微软宣布了一项 Visual Studio“开发助手”(Developer Assistant)插件的重大更新,其现已支持“基于 C++ 的情境感知 web 解决方案”.开发助手能够嵌入 Vis ...

  9. php的函数iconv在转"utf-8"到"gb2312"时会自动截断

    最近在写网站后台时候,需要用到iconv函数把前端jquery Post来过的utf-8编码内容转成gb2312, 发现只有用iconv函数把内容的数据一转码数据就会无缘无故的少了一部分.   问了我 ...

  10. MVC 安装

    mvc 4 支持window xp,window 7,window 8, mvc 4 支持vs2010,vs2012 vs2012中包含mvc4; vs2010中需要安装mvc4 安装包: