html位置不随滚轮移动,绝对定位元素随滚动条滑动无延时不闪烁的解决办法!

绝对定位元素随滚动条滑动不闪烁

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)的时候进行一次重新定位.