固定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?

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

慈心积善融学习,技术愿为有情学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。 1、代码                      #div1{   ...
  • yushaopu
  • yushaopu
  • 2016年09月27日 09:03
  • 1794

如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

利用JavaScript脚本,从浏览器中获取各个关于位置的参数,然后将其计算后,定位在窗体的右下角。可以承认,这个方法确实是比较自然的想法,也是很常见的方法,但是这样的方法有以下几个缺点: 1、使用...
  • jieCooner
  • jieCooner
  • 2013年10月14日 08:56
  • 2875

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

1、position div中的style属性中的一个关键字,表明了该div所在的位置以及位置本身的属性。 position有四个值可选:static,absolute,fixed,relative。...
  • shansusu
  • shansusu
  • 2015年01月14日 10:46
  • 4263

div 固定不动,不随滚动条滚动且不闪动

chinmo.net body{ margin:0px; padding:0px; } #glideDiv0{position:fixed; bottom:0;left:0; width:100...
  • yyongsheng
  • yyongsheng
  • 2016年06月07日 18:04
  • 722

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

JS: 当div滚动到顶部时,DIV固定在顶部不动,不随滚动条滚动而滚动,除这个div以外的其它元素可以滚动 function scrollDiv () { var ie6 = document....
  • jokewangloveyou
  • jokewangloveyou
  • 2014年02月19日 14:32
  • 3915

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

随滚动条移动的层 - 威海ABC-http://www.0631abc.com
  • lianchao668
  • lianchao668
  • 2012年08月06日 15:42
  • 805

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

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

固定层不随滚动条滚动而滚动(纯CSS,兼容IE6,IE7,IE8,Firefox,Safari)

使用CSS来固定层,此层不随滚动条滚动而滚动,固定层分三个位置: 页面顶端:   页面中央:   页面底层:     StaticContent.css文件: /****...
  • lovegonghui
  • lovegonghui
  • 2015年11月03日 17:02
  • 327

CSS jquery实现Div底部固定,不随滚动条移动

CSS jquery实现Div底部固定,在固定的Div内你可以显示菜单、公告提示、每日推荐等,再加上一个关闭功能那就更完美了。本例代码主要是演示jQuery与CSS配合实现Div的定位功能,搞明白了肯...
  • life66881
  • life66881
  • 2015年02月25日 13:27
  • 1048

Study Html《如何让DIV固定在页面的某个位置而不随着滚动条随意滚动》

利用JavaScript脚本,从浏览器中获取各个关于位置的参数,然后将其计算后,定位在窗体的右下角。可以承认,这个方法确实是比较自然的想法,也是很常见的方法,但是这样的方法有以下几个缺点: 1、...
  • jiangdragon
  • jiangdragon
  • 2015年01月29日 13:55
  • 6118
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:固定DIV不随滚动条滚动
举报原因:
原因补充:

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