固定DIV不随滚动条滚动

原创 2014年07月22日 16:47:50


【webQD】☆★之固定DIV不随滚动条滚动


    在项目开发中,有的页面的某些按钮,我们是不想让他跟着滚动条滚动的,比如,添加页面,有很长的内容添加,在往下滚动添加的过程中,我们始终想看到保存按钮。OK!

    

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
    <style type="text/css">
    body{
     margin:0px;
     padding:0px;
    }
    #nav{position:fixed; top:0;left:0; width:100%; background:#F00;}
    </style>
</head>
<body>
<div>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <br/>xxxxxxxxx<br/>
    <div id="nav">
        效果
    </div>
</div>
</body>
</html>

  我们看一下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left"、 "top"、 "right"、      "bottom" 属性进行定位!ok!

  position:absolute,absolute是对网页边框而言的。

  如果,你用absolute加上js代码也可以实现以上效果,但是你会发现随着滚动条滚动时,那个层会晃来晃去,所以采用这种position:fixed,是可以使层固定不动的一种做法!

  我特意查了一下手册,貌似在IE6一下版本不行!

  ok?

相关文章推荐

固定div位置,不随滚动条滚动

我们在html页面中的某处,可能要固定div的位置,下面我们编写js来控制 1、只能在初始页面的可视区域固定div 编写js代码: jQuery.fn.floatdiv=function(l...

div不随滚动条的移动而改变位置

  • 2012年01月12日 11:46
  • 1010B
  • 下载

CSS固定层-不随滚动条滚动.htm

  • 2009年09月30日 14:39
  • 3KB
  • 下载

往下拖动页面滚动条时,固定住菜单栏(不随其他内容网上滚动,兼容各版本IE、Chrome、Firefox)

// 定义菜单栏离页面顶部的距离,默认为200 var divOffsetTop = 200; //滚动事件 window.onscroll=function(){ var div ...
  • senton
  • senton
  • 2012年03月12日 08:59
  • 3958

当div滚动到顶部时,DIV固定在顶部不动,不随滚动条滚动而滚动,除这个div以外的其它元素可以滚动

JS: 当div滚动到顶部时,DIV固定在顶部不动,不随滚动条滚动而滚动,除这个div以外的其它元素可以滚动 function scrollDiv () { var ie6 = document....

往下拖动页面滚动条时,固定住菜单栏(不随其他内容网上滚动,兼容各版本IE、Chrome、Firefox)

>   html xmlns="http://www.w3.org/1999/xhtml">     head>       meta http-equiv="Content-Type" con...

滚动条下拉DIV固定在头部不动

  • 2014年03月18日 15:48
  • 33KB
  • 下载

CSS基础 不会随着滚动条变化的固定在左上角的div块

镇场诗:慈心积善融学习,技术誓为大家学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。 ———————————————————————————————————————————————...

滚动条事件—固定div(第一篇)

最近在弄公司的官网,产品经理要求的特效是从魅族官网、苹果官网、360官网与36Kr官网上而来!最开始的时候我是各种惧怕,这全都是些大公司的网站,技术要求肯定特别高,我能做出来吗?但后来研究着研究着就通...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:固定DIV不随滚动条滚动
举报原因:
原因补充:

(最多只允许输入30个字)