JS右侧浮层控制在页头与页脚之间

JavaScript 2013-01-22 浮动,算法

许多站点都使用右侧浮层,如阿里云的:

蜂鸟网的:

等等,不一一举例!而此次是介绍阿里云这种网站模式的右侧浮层控制在页头与页脚之间,先来看看阿里云网站的框架

这种网站的框架页头与页脚的宽度是百分之百,那么右侧浮层在滑动到底部时可能会出现一种情况,就是浮层的一部分或者全部盖住了页脚。显然,这种效果让人看起来不是很舒服,因此需要做一些计算,让浮层不跨越到页脚区域。JS是一门编程语言,只要你能算的出来它就能实现,下面来分析介绍算法。

首先得确定网页超过一屏的高度,即出现滚动条。如果连滚动条都没出现,就没有计算意义了。

你可以把页脚给高一些,这样你再拖动滚动条到底应该就会出现浮层盖住页脚的情况了。此时你可以按照这个逻辑去计算让浮层不盖住页脚:

网页内容高度 - 滚动条高度 - ( 浮层高度 + 距离屏幕上方的间距 + 页脚高度 )

得出的值,如果大约零,则表示还有足够的空间容得下浮层,如果小于零,最终数值是多少就表示浮层超越了页脚多少像素。

比如得到-20,那么你给浮层设置top的值为-20px,这样浮层的底部会与主要内容区域的底部持平不会越到页脚,而响应的浮层由上至下20px部分会被隐藏在屏幕上方。

当然,具体到项目的时候,可能还需要微调。

文字链接:《JS右侧浮层控制在页头与页脚之间

文章地址:http://www.qttc.net/201301265.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?