后退 刷新 前进 收藏 顶部 |   知道 黑匣子 富媒体 技术服务

JQUERY关于网页与DIV,滚动条距离网页顶部与底部高度的判断

程序猿 JS jquery FIXED 高度... (shuke.2014-04-30 04:43)
一般网页用特效时,会用到定位;
各种绝对,相对,固定,定位的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
进度:100% 返回程序猿

解决织梦图集中上传图片时跳出302错误

图片新热点

导航


目录


    站内搜索
    首页 | W3C | ME