<!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. each和$(this)配合循环_siblings选取同级不同类型元素

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. ASP.NET MVC几种找不到资源的问题解决办法

    转自:http://www.cnblogs.com/xyang/archive/2011/11/24/2262003.html 在MVC中,controller中的Action和View中的.csht ...

  3. jquery组件团购倒计时功能

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

  4. [svn]svn: E155015: 提交失败(细节如下) 解决办法

    svn 出现冲突是经常发生的事,最近改用命令操作svn,用界面电脑有些反应慢 出现冲突使用svn 命令肯定也是可以解决的: 查看警告信息提示冲突的文件,执行 svn resolved <文件名& ...

  5. jquery 设置select 默认值

    $('#@(Perfix)OrgType').children("option").each(function () { var temp_value = $(this).val( ...

  6. TX Textcontrol 使用总结四——打印

    使用内置的打印对话框在Text Control中只需一行代码就可以实现打印操作,通过调研 TextControl.Print 方法将打开一个打印对话框,用户可以设置打印机和其他打印参数.==>t ...

  7. sublime text 3 安装注释

    sublime text 3 1.安装Sublime Text 3  下载安装:http://www.sublimetext.com/3 Package Control安装:https://subli ...

  8. phpize的安装

    一直想装VLD却一直没装上,因为需要用到phpize,但这个工具大部分机子都没有装,上网搜了一下大部分都是讲phpize的应用没有讲怎么安装. 今天终于搜到了,不过是要在linux机器上,有yum命令 ...

  9. Perl 模块 Getopt::Std 和 Getopt::Long

    示例程序: getopt.pl; 1 2 3 4 5 6 7 8 #!/usr/bin/perl -w #use strict; use Getopt::Std; use vars qw($opt_a ...

  10. SVN Server配置详解 及备份

    SVN简介和工作原理 subversion(简称svn)是近几年崛起的版本管理软件,是cvs的接班人,目前绝大多数开源软件都使用svn作为代码版本管理软件.Subversion支持linux和wind ...