学习资料
http://v.apelearn.com/student.php
要求
展现广告的位置固定在页面的右侧中间位置；
知识点
1.IE6不兼容position：fixed;的解决方案
position: fixed;
_position: absolute;/*IE6不兼容fixed*/
2. 解决抖动的方案
body {
/*解决抖动：背景固定*/
background-image: url();
background-attachment: fixed;
}
3.屏幕可视区域的获取
//javascript
document.documentElement.clientHeight
document.documentElement.clientWidth
//jQuery
$(window).height();
S(window).width();
4.元素实际尺寸的获取
//JavaScript
obj.offsetHeight
obj.offsetWidth
//jQuery
outerHeight()
outerWidth()
5.浏览器版本检测
window.navigator.userAgent.toLowerCase().indexOf('IE 6.0')
6.滚动高度的获取
document.documentElement.clientHeight || document.body.scrollTop;
7.滚动条滚动事件
scroll
8.其他
获取览器显示区域的高度 ： $(window).height();
获取浏览器显示区域的宽度 ：$(window).width();
获取页面的文档高度 ：$(document).height();
获取页面的文档宽度 ：$(document).width();
获取滚动条到顶部的垂直高度 ：$(document).scrollTop();
获取滚动条到左边的垂直宽度 ：$(document).scrollLeft();
实现思路
1.获取广告位容器的实际高度；
2.获取屏幕可视区的高度；
3.计算居中的位置；
4.兼容性解决；
Demo代码
HTML
<div class="box"></div>
CSS
body{height:3000px;}
.box{
/*解决抖动的问题*/
position:fixed;_position:absolute;/*IE6不兼容fixed*/right:0;top:0;width:200px;height:200px;line-height:200px;background-color:orangered;color:#fff;text-align:center;}
body{
/*解决抖动：背景固定*/
background-image:url();background-attachment:fixed;}
JS
$(function() {
/* 盒子的实际尺寸：本身高度+上下边框+上下的内边距 */
variBoxH =$('.box').outerHeight();
/* 获取可视区的高度 */
variClientHeight =$(window).height();
/* 居中定位： (屏幕可视区域的高度 - 盒子本身的高度)/2
* 即是：(可视区域 - 元素尺寸)/2*/
variPosition = (iClientHeight - iBoxH)/2;
$('.box').css('top',iPosition);
$(window).scroll(function() {
if(window.navigator.userAgent.toLowerCase().indexOf('IE 6.0') !== -1) {
variScrollTop =$(document).scrollTop();
alert(iScrollTop);
$('.box').css('top',(iPosition + iScrollTop));
}
});
});
效果
