<!DOCTYPE html>
<html>
<head>
<meta name="Author" content="whidy">
<title>绝对定位元素随滚动条滑动不闪烁</title>
<style>
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";
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="fixPos"></div>
<div class="content" id="con">
<h1>Solute an absolute elements scroll width no delay, no blink!</h1>
<P>I love you so much, whidy!</P>
<P>And you?</P>
</div>
</div>
</div>
<script type="text/javascript">
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';
}
}
</script>
</body>
</html>这个效果就是某个内部元素随着浏览器滚动条上下移动,听起来不错哦~加个fixed属性?但是这个效果有几个条件限制,当这个元素超出父级元素高度后,隐藏,这个是fixed无法做到了,那么必然要用相对父级的元素进行绝对定位了.通过JS在每次触发浏览器滚动事件(window.onscroll)的时候进行一次重新定位.
转载地址：http://www.whidy.net/absolute-element-scroll-without-blink.html#more-1884
675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
