一般网页用特效时,会用到定位;
各种绝对,相对,固定,定位的BUG也来了;
那是一个各种不服啊;
与是分享简单JQ函数;
$(document).ready(function(){
var skheight=$(".xslisty1").height();
$(".middle").css("height",skheight);
var skb=1200-$(window).height()*0.6;
$(window).scroll(function(){
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
if ($(window).scrollTop()>605 && scrollBottom>skb){
$("#sknav_20131024 .mic").addClass("sknav_01");
}else{ $("#sknav_20131024 .mic").removeClass("sknav_01");}
});
});
解释一下;
<STYLE TYPE="text/css">
body{margin:0 auto;background:gray; font-size:14px;line-height:30px;}
*{padding:0;margin:0}
.box{ width:1000px; margin:400px auto; background:#ccc;height:300px;border:solid gray 3px;padding:10px;}
</STYLE>
</head>
<body>
<ul style="position:fixed; left:0;bottom:20%;_top:expression(eval(document.documentElement.scrollTop));_position:absolute; _margin-top:20%;">
<li>盒子的高度是<span class="x1"></span> </li>
<li>网页DOCUMENT的高度是<span class="x2"></span> </li>
<li>网页windows的高度是<span class="x3"></span> </li>
<li>网页scrolltop的高度是<span class="x4"></span> </li>
<li>$(document).height() - $(window).height() - $(window).scrollTop()=<span class="x5"></span> </li>
<li> $(window).scrollTop() + $(window).height()=<span class="x6"></span> </li>
</ul>
<br>
<DIV class="box">1</DIV><hr><DIV class="box">2</DIV><DIV ALIGN=""></DIV>
<!-- 2014/4/30 power by sk -->
</body>
</html>
<SCRIPT type="text/JavaScript">
$(document).ready(function(){
$(window).scroll(function(){
var skheight=$(".box").height();
$(".x1").html(skheight);
var x2=$(document).height();
$(".x2").html(x2);
var x3=$(window).height();
$(".x3").html(x3);
var x4=$(window).scrollTop();
$(".x4").html(x4);
var x5 = $(document).height() - $(window).height() - $(window).scrollTop();
$(".x5").html(x5);
var x6 = $(window).scrollTop() + $(window).height();
$(".x6").html(x6);
if ($(window).scrollTop()>400 && x5>400){
$(".x1").css("color","red");
}else{
$(".x1").css("color","blue");
};
});
});
</SCRIPT>
IE6的BUG,CSS调整方法:http://www.coolneng.com/?thread-index-fid-6-tid-417.htm