<!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. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  2. tengine安装

    下载地址: http://tengine.taobao.org/download_cn.html $tar -xvzf tengine-2.1.2.tar.gz $./configure$ make$ ...

  3. Confluence 5.4实现与JIRA前所未有的集成

    http://www.blogjava.net/qileilove/archive/2014/03/03/410520.html 软件开发过程是一个讲求高度协作的过程,它需要很多不同领域团队的共同努力 ...

  4. F5 BIG-IP负载均衡器配置实例与Web管理界面体验

    [文章作者:张宴 本文版本:v1.0 最后修改:2008.05.22 转载请注明出自:http://blog.s135.com/f5_big_ip] 前言:最近一直在对比测试F5 BIG-IP和Cit ...

  5. DW(四):Azure域控服务器配置

    polybase集群要求使用相同的域账号,本节介绍选择用Azure虚拟机搭建自己的内网DNS服务器和域控 创建虚拟网络polybase,创建名为DNS的子网,如下图: 创建虚拟机,选择polybase ...

  6. 【linux】pkill 踢在线用户

    [root@Centos ~]# w 01:52:52 up 18 min,  3 users,  load average: 0.00, 0.02, 0.05USER     TTY      FR ...

  7. 剑指offer系列60---第一个只出现一次的字符

    [题目]在一个字符串(1<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符的位置. * 若为空串,返回-1.位置索引从0开始 * [思路]1 首先遍历字符串数组,添 ...

  8. Spring实战1：Spring初探

    主要内容 Spring的使命--简化Java开发 Spring容器 Spring的整体架构 Spring的新发展 现在的Java程序员赶上了好时候.在将近20年的历史中,Java的发展历经沉浮.尽管有 ...

  9. 【linux】之虚拟机的使用

    VMware常用的配置 1.虚拟机快照设置 2.虚拟机克隆 分为链接克隆和完整克隆 链接克隆不占用过大的资源,但是主机删除之后,克隆机无法正常使用 完整克隆,占用空间资源,和主机之间互不影响 一般常用 ...

  10. C3P0数据库连接池的相关bug解决

    数据库连接池的几个常见bug: 1.警告: com.mchange.v2.async.ThreadPoolAsynchronousRunner$DeadlockDetector@76c7022e -- ...