<!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. Android中使用speex将PCM录音格式转Wav格式

    Android中使用speex将PCM录音格式转Wav格式 2013-09-17 17:24:00|  分类: android |  标签:android  speex  wav  |举报|字号 订阅 ...

  2. JSP页面中<%! %>和<% %>的区别

    JSP声明语句:<%!声明语句%>,通常声明全局变量.常量.方法.类JSP Scriptlet:<%java代码%>,其中可包含局部变量.java语句JSP表达式:<%= ...

  3. jQuery Mobile_表单元素

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. $_SERVER 相关变量

    PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root ...

  5. 剑指offer系列50--不用加减乘除做加法

    [题目]写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号 * [思路]1 不计进位,直接位运算(异或方式可实现此运算,即1+0 0+1为1,0+0 1+1位0) * 2 与 ...

  6. 剑指offer系列37----数据流中的中位数

    [题目]如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值, * 那么中位数就是所有数值排序之后位于中间的数值. package com.exe8.offer; import java.uti ...

  7. Oracle中in和exists的选择

    在ORACLE 11G大行其道的今天,还有很多人受早期版本的影响,记住一些既定的规则,   1.子查询结果集小,用IN   2.外表小,子查询表大,用EXISTS 摘自:http://blog.chi ...

  8. 黄聪：C#操作xml SelectNodes,SelectSingleNode通过 xPath 定位class包含Contains的DIV

    一. SelectNodes,SelectSingleNode总是返回NULL 下面以一个简单的xml为例: <?xml version="1.0"?> <mes ...

  9. C#之线程和并发

    建议大家对C#撑握的不错的时候,可以去看一些开源项目.走技术这条路,就要耐得住寂寞(群里双休日说要让群主找妹子进群的人必须反思),练好内功.不撑握C#高级知识点,别想看懂优秀的开源项目,更别指望吸收其 ...

  10. WLS_Oracle Weblogic管理概述（概念）

    2012-09-01 Created By BaoXinjian