<!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. Java-JDBC连接Oracle 数据库

    package com.zse.oracle; import oracle.jdbc.*; import java.sql.*; import javax.swing.text.html.HTMLDo ...

  2. 最长公共字串（LCS）最长连续公共字串（LCCS）

    链接1:http://blog.csdn.net/x_xiaoge/article/details/7376220 链接2:http://blog.csdn.net/x_xiaoge/article/ ...

  3. C++ 拆分字符串-copy()

    c++拆分字符串方法: #include <iostream>#include <string>#include <sstream>#include <alg ...

  4. Linux 环境下开机自启动Oracle服务

    使用如下命令查看Oracle相关服务是否已启动: ps aux | grep ora_ #若无ora_**_**相关的进程,则oracle数据库实例未启动 netstat -tlnup | grep ...

  5. 并行计算之OpenMP中的任务调度

    本文参考<OpenMP中的任务调度>博文,主要讲的是OpenMP中的schedule子句用法. 一.应用需求 在OpenMP并行计算中,任务调度主要用于并行的for循环.当for循环中每次 ...

  6. Windows环境变量

    说明:系统文件盘为C盘,操作系统为Windows XP.登录用户名为weste.计算机名为icech 说明:不同的操作系统如Windows XP和Windows 2000相对应的一些路径是不同的,这里 ...

  7. $_SERVER 相关变量

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

  8. JS request函数 用来获取url参数

    function request(strParame) { var args = new Object( ); var query = location.search.substring(1); va ...

  9. systemd的原理和适用方法

    systemd的原理: https://www.linux.com/learn/tutorials/527639-managing-services-on-linux-with-systemd htt ...

  10. SPOJ #692. Fruit Farm

    Another palindrome related problem. Actually nothing too theoretical here, but please keep following ...