您的位置：首页 > 编程技术 > html  >  让层位置固定不随滚动条拖动

让层位置固定不随滚动条拖动

 更新时间：2016年9月20日 19:06  点击：1968

<html>
<head>
<style type="text/css">
html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:2;
 overflow:hidden;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>
<div id="Main">
<p>&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;</p>
<p>&nbsxxxxxxxxcccccccccccccccccccxp;</p>
<p>&nbsp;</p>
<p>&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;</p>
<p>&ncxvcxzvczxvcxzvczbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;dfdf</p>
<p>&nbscxzvcxzvcxzvczxvcxzp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;ddddddddddddddddd</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbxsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>v
</div>
</body>

</html>

代码二.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:7;
 overflow:hidden;
}
#ToolBa_2{

 position:absolute;
 top:300px;
 left:50px;
 width:300px;
 height:20px;
 background:#ff0000;
 z-index3;
 overflow:hidden;
       color:#fff;
}
#ToolBa_3{

 position:absolute;
 top:600px;
 left:50px;
 width:300px;
 height:20px;
 background:#ff0000;
 z-index32;
 overflow:hidden;
       color:#fff;
}
#ToolBa_4{


 width:300px;
 height:200px;
 background:#ff0000;
 z-index35;
 overflow:hidden;
       color:#fff;
}
#ToolBa_5{


 width:300px;
 height:200px;
 background:#ff0000;
 z-index39;
 overflow:hidden;
       color:#fff;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>

 

<div id="ToolBa_2">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_3">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_4">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_5">可是这样页面上所有div的位置都固定不动了!</div>
<div id="Main">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>

</html>

这里对web程序方面的优化作一个总结，虽然我用的是PHP其实不管理是什么语言方向都是一样的。
1.编码规范化可读性优化
编码规范我想一般程序员不会不了解，如果你这方面是空白你应该好好补补基础了，做到编码规范是一个好的程序员的最基础要求，一个团队也应该有自己的编码规范。所以程序的优化也应该包含到这个方面，在你开发程序的过程中可能会有些遗漏，所以在我们进行编码规范化可读性优化是很有必要的。其实一份再好的程序代码若干年后你自己都未必能看的懂更不用说别人来看你的代码，使你自己写出的代码有更好的可读性，这个是一个好的程序员应该做的，并且是对一个团队和你自己作品的责任感。
优化方向就是使你的代码更清析更易懂。
2.程序效率、流程逻辑优化
程序效率的优化是最重要的，程序运行速度是程序代码好坏最重要的因素，程序逻辑其实就是你的解决思路，解决思路并不是唯一的，所以我们可以对它进行优化。逻辑的设计也和可读性有一定的关系，逻辑清晰可读性就更强。
优化的方向就很明确了提高速度，清晰逻辑。简单的逻辑并不代表一定是速度快，复杂的逻辑并不一定是慢的。所以在这两方面是关联。
3.SQL优化，减少查询次数
在使用数据库的程序中我们知道数据库的查询是在整个程序执行中占很大比例的，所以SQL的优化是非常重要的。
优化的方向一方面是SQL语句本身的优化，熟悉SQL的人应该会知道，不同的SQL写法执行的效率差别是很大的，如：尽量不对字段加函数操作，更多的大家可以去查找高效SQL这方面的资料。第二在一个页面中减少查询次数，这个道理很清楚，我们可以把整个页面的SQL都输出来进行分析，是否可以合并语句，是否可以做冗余字段等等，尽量减少SQL的查询次数，坚绝不在循环中使用查询。
4.缓存优化
缓存优化其实就是对上一点的补充，但缓存优化是很重要的，所以可以单独列为一点。缓存的数据主要就是从数据库中读取出来的。对缓存的一些介绍：http://www.coderhome.net/zifa/?p=195,当然缓存也应该适当，应该只把需要缓存的数据进行缓存。
5.html,css,js文件优化，减少冗余代码
这一点与服务端程序没有关系，主要是与浏览器相关的几方面。html的结构是会影响到浏览器的解析，所以好的html代码也会影响访问速度。相比之下客户端的代码就不允许有一点无用的东西存在，能把文件减少一K就应该减少。js虽然是在客户端执行但也应该去考虑它的效率问题，网络上也有这方面的文章介绍。
6.可用性优化
可用性优化主要指的是UED方面的，并不是每一个团队都有专门的UED，作为web程序的开发人员也应该有这方面的意识，去了解用户，而不是埋头写代码。努力使你开发的页面对用户更友好，更容易使用。
7.框架架构优化
如果有使用到开发框架，也应该考虑到对框架的优化，减少框架本身占用的资源。
其它：服务器架构优化、数据库优化
这些方面和程序开发没有直接关系，但和web程序的运行也是关系密切的，所以顺便提一提。

Javascript

　　 JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript 重新进行设计，并改名为JavaScript。

　　　JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。

　　 JavaScript具有很多优点：
　　 1.简单性 　JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

　　 2.动态性　 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

　　 3.跨平台性 　JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。

　　 4.节省CGI的交互时间　 随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个进程为它服务，它要占用服务器的资源(如CPU服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。

　　　JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。

关于SPAN和DIV的总结性报告！！！

SPAN 和 DIV 的区别在于

1。div是块级 span是内嵌式
2。DIV有结构的意义 SPAN没有
3。DIV包含的对象前后都有换行，SPAN没有

共性
他们都是容器元素，都是用来包含其他同类型的元素的，
最重要的是：
***************************
他们都是为CSS而专门而成立的
***************************

补充：
块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。

如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。

你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.


内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。


可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单封装 分页效果</title>
<style type="text/css" media="all">
/* <![CDATA[ */
body{margin:50px}
ul{border-top:solid 1px #ddd; margin:0; padding:0 0 0 20px; list-style:none; background:#f4f4f4}
ul li{float:left}
ul li a{display:block; width:30px; height:30px;  border:solid 1px #f4f4f4; text-align:center; line-height:30px}
ul li a.on{position:relative; margin:-1px 0 0; border:solid 1px #ddd; border-top-color:#fff; color:#f00; background:#fff}
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block}
/* ]]> */
</style>
</head>
<body>
<ul id="test" class="clear">
<li><a href="javascript:;" class="on">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
<li><a href="javascript:;">6</a></li>
<li><a href="javascript:;">7</a></li>
<li><a href="javascript:;">8</a></li>
<li><a href="javascript:;">9</a></li>
</ul>
<script type="text/javascript">
// <![CDTAT[
// by MacJi
function f(c){
 this.container = document.getElementById(c);
 this.li = this.container.getElementsByTagName('a');
 var _this = this;
 
 this.init = function (){
  for(var i = 0; i < _this.li.length; i++)_this.li[i].onclick = function(){_this.setOn(this);return this.blur()};
 }
 
 this.setOn = function(o){
  for(var i = 0; i < _this.li.length; i++) _this.li[i].className = '';
  o.className = 'on';
 }
}
var page = new f('test');
page.init();
// ]]>
</script>
</body>
</html>

[!--infotagslink--]

相关文章

  • jquery如何获取元素的滚动条高度等实现代码

    主要功能：获取浏览器显示区域（可视区域）的高度 ： $(window).height(); 获取浏览器显示区域（可视区域）的宽度 ：$(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 ：$(document).width();...2015-10-21

  • 如何使用JavaScript实现无缝滚动自动播放轮播图效果

    这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-08-20

  • js实现文字垂直滚动和鼠标悬停效果

    这篇文章主要介绍了js实现文字垂直滚动和鼠标悬停效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-01-05

  • JavaScript 获取滚动条位置并将页面滑动到锚点

    这篇文章主要介绍了JavaScript 获取滚动条位置并将页面滑动到锚点的的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下...2021-02-09

  • 使用jQuery.Pin垂直滚动时固定导航

    这篇文章主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-27

  • JS实现图片的不间断连续滚动的简单实例

    下面小编就为大家带来一篇JS实现图片的不间断连续滚动的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-06-12

  • 基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解

    这篇文章主要介绍了基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-08

  • js实现div在页面拖动效果

    这篇文章主要介绍了js实现div在页面拖动效果,涉及JavaScript动态操作页面元素与数值计算的相关技巧,需要的朋友可以参考下...2016-05-05

  • JS实现的N多简单无缝滚动代码(包含图文效果)

    本文实例讲述了JS实现的N多简单无缝滚动代码。分享给大家供大家参考，具体如下：实现原理很简单，注册事件之后，立即将元素的innerHTML累加一次。接着滚动开始，当滚动条到达元素的中间位置时：不要在子元素上设置margin和paddin...2015-11-08

  • javascript实现平滑无缝滚动

    这篇文章主要为大家详细介绍了javascript实现平滑无缝滚动的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-05-09

  • javascript实现无缝上下滚动特效

    这篇文章主要介绍了javascript实现无缝上下滚动特效的相关资料,需要的朋友可以参考下...2015-12-18

  • JS平滑无缝滚动效果的实现代码

    下面小编就为大家带来一篇JS平滑无缝滚动效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考...2016-05-09

  • jQuery实现模仿微博下拉滚动条加载数据效果

    这篇文章主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下...2015-12-27

  • 原生js实现类似fullpage的单页/全屏滚动

    这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，下面来一起看看吧。...2017-01-26

  • iOS实现循环滚动公告栏

    这篇文章主要为大家详细介绍了iOS实现循环滚动公告栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-20

  • Javascript实现信息滚动效果

    这篇文章主要为大家详细介绍了Javascript实现信息滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-22

  • PyQt5实现多张图片显示并滚动

    最近要做个网页图片批量下载工具，然后需要一个页面显示网页上的所有图片供用户勾选，再根据勾选的内容来下载指定图片，其中就涉及到要到同时显示多张图片，本文就来介绍一下...2021-06-11

  • 微信小程序点击滚动到指定位置的实现

    这篇文章主要介绍了微信小程序点击滚动到指定位置的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-23

  • JS无缝滚动效果实现方法分析

    这篇文章主要介绍了JS无缝滚动效果实现方法,结合实例形式较为详细的分析了无缝滚动的原理、实现技巧与相关注意事项,需要的朋友可以参考下...2017-01-09

  • Swift 使用 Observe 监测页面滚动的实现方法

    这篇文章主要介绍了Swift 使用 Observe 监测页面滚动的实现方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-30