body {
background: #eee;
margin: 0;
padding: 0;
}
.container {
width: 1000px;
height: 5000px;
background: #ddd;
margin: 0 auto;
}
.wrapper {
height: 400px;
width: 998px;
background: #ccc;
border: 1px solid #aaa;
position: relative;
top:5%;
overflow: hidden;
}
.fixPos {
position: fixed;/* 解决CHROME不闪动的问题,不信你删了试试! */
visibility:hidden;
}
.content {
width:940px;
font: 100%/200% "Microsoft YaHei";
padding:0 30px;
position: absolute;
top: 50px;
}
.content h1 {
font:bold 150%/200% "Microsoft YaHei";
}
Solute an absolute elements scroll width no delay, no blink!
I love you so much, whidy!
And you?
window.onscroll = function(){
var con=document.getElementById('con');
// var scrollTopValue = document.documentElement.scrollTop || document.body.scrollTop;
// con.style.top = scrollTopValue/2 + 50 + 'px';
if(!document.body.scrollTop){//for IE 6,7,8 (8+版本未测试)
con.style.top = document.documentElement.scrollTop/2 + 50 + 'px';
} else {
con.style.top = document.body.scrollTop/2 + 50 + 'px';
}
}
这个效果就是某个内部元素随着浏览器滚动条上下移动,听起来不错哦~加个fixed属性?但是这个效果有几个条件限制,当这个元素超出父级元素高度后,隐藏,这个是fixed无法做到了,那么必然要用相对父级的元素进行绝对定位了.通过JS在每次触发浏览器滚动事件(window.onscroll)的时候进行一次重新定位.