高度相关操作

注意如果给div设置一个高度。一旦超过这个高度。就会自动出现滚动条。这所有的得归功于overflow:auto这个属性。

注意不仅对body可以设置onscroll,也可以对div设置onscroll。只要将对body设置的onScroll放到div上边就可以了。

scrollTop:就是当前标签离你滚动条的顶部有多高。滚动条距离顶部的高度。

注意margin:0 auto是居中的意思。注意时间长了,不用margin:0 auto.实际上这就表示居中的意思。

padding是内边距。margin是外边距。注意padding是内边距。外边距对scrollHeight是没有影响的。

0

scrollHeight:文档高度:自身+padding

clientTop:是border的宽度,边框高度。

clientHeight:也是文档的高度,前提是没有滚动条。注意如果没有滚动条,scrollHeight跟clientHeight是一样的。可见范围的高度。

clientHeight:是视口的高度,也就是可见范围的高度。也是自身+padding

注意还有一个offsetTop:当前标签距离文档“顶部”的高度

这个主要表示当前距离顶部有多高。

offsetHeight:这也是一个可见范围的高度:这个高度为自身+padding+border

对offsetTop的补充:如果它的父标签里面没有出现position这样的,就表示它的高度就是距离顶部的高度。如果出现了position,则这个offsetHeight:就表示当前标签距离它的父标签的高度。但是如果再加个padding就表示,则offsetTop就表示是这个padding的高度了。

offsetParent直接找到有position的。

offsetTop:当前标签距离上部定位标签的高度。当前标签距离顶部的高度。

注意专门写一个w的样式:让这个w的样式居中,而且还设置宽度。

.w{

margin: 0 auto;

width:980px;

}

.menu{

position:left;

}

.content{

position:left;

}

注意放菜单用ul。

 

<div class="menu"></div>

<div class="content"></div>

注意menu、content的宽度最好也不设置了。

将它们的position设置为absolute。

此时可以让menu离左边200px.并且设置它的宽度为180px.

当滚动滑轮的时候,让那个标签固定在顶部。

因为滑动的时候是在body上边进行滑动的,所以在body的标签里边写上:

onscroll="Hua();"

在Hua()这个函数里面:

var HuaGao=document.body.scrollTop;//这一句是在检验滑动了多高。

往下拉多少,页面就往上边去多少。

这个黑框是48像素。如果大于48像素,那个菜单就应该固定在那里。获取那个menu,然后让它的position变为fixed就可以了。

 

posted @ 2017-03-16 13:48  关泉珍  阅读(94)  评论(0)    收藏  举报