求助高手帮忙，下拉到底部会让尾部的div显示，然后继续下拉尾部又消失了，怎么才能下拉到尾部时，尾部内容能出现，然后滚动条到下面，然后上拉内容消失？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body><script type="text/javascript">
var MicCase = {
//获取滚动条当前的位置
getScrollTop:function()
{
var scrollTop = 0; 
if (document.documentElement && document.documentElement.scrollTop)
{
scrollTop = document.documentElement.scrollTop;
}
else if (document.body)
{
scrollTop = document.body.scrollTop;
}
return scrollTop;
},
//获取当前可视范围的高度 
getClientHeight:function()
{
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight)
{
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}
else
{
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight; 
},
//获取文档完整的高度 
getScrollHeight:function()
{
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
}
};
window.onscroll = function (){
var Mic = MicCase;
if (Mic.getScrollTop() + Mic.getClientHeight() == Mic.getScrollHeight())
{
document.getElementById("div2").style.display="block";
document.getElementById("div1").style.fontSize="50px";
document.getElementById("div1").innerHTML="方块";
document.getElementById("div1").style.color = "red";
}
else
{
document.getElementById("div2").style.display="none";
document.getElementById("div1").style.fontSize="100px";
document.getElementById("div1").innerHTML="没有";
document.getElementById("div1").style.color = "yellow";
}
}</script><div id="div1" style="width:1000px; height:1200px; background-color:#00C; font-size:12px">111</div>
<div id="div2" style="width:1000px; height:300px; background-color:red; display:none">222</div></body>
</html>
求助高手帮忙，下拉到底部会让尾部的div显示，然后继续下拉尾部又消失了，怎么才能下拉到尾部时，尾部内容能出现，然后滚动条到下面，然后上拉内容消失？

解决方案 »

  1.   

    仔细分析一下window.onscroll匿名函数的条件判断，问题就出在条件判断上
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
     
    <body>
     
    <script type="text/javascript">
    var MicCase = {
        //获取滚动条当前的位置
        getScrollTop:function()
        {
            var scrollTop = 0; 
            if (document.documentElement && document.documentElement.scrollTop)
            {
                scrollTop = document.documentElement.scrollTop;
            }
            else if (document.body)
            {
                scrollTop = document.body.scrollTop;
            }
            return scrollTop;
        },
        //获取当前可视范围的高度 
        getClientHeight:function()
        {
            var clientHeight = 0;
            if (document.body.clientHeight && document.documentElement.clientHeight)
            {
                clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
            }
            else
            {
                clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
            }
            return clientHeight; 
        },
        //获取文档完整的高度 
        getScrollHeight:function()
        {
            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
        }
    };
     
     
    window.onscroll = function (){
                var Mic = MicCase;
                if (Mic.getScrollTop() + Mic.getClientHeight() == Mic.getScrollHeight())
                {
                    document.getElementById("div2").style.display="block";
                    document.getElementById("div1").style.fontSize="50px";
                    document.getElementById("div1").innerHTML="方块";
                    document.getElementById("div1").style.color = "red";
                }
                else
                {
                    document.getElementById("div2").style.display="none";
                    document.getElementById("div1").style.fontSize="100px";
                    document.getElementById("div1").innerHTML="没有";
                    document.getElementById("div1").style.color = "yellow";
                }
    }
     
    </script>
     
    <div id="div1" style="width:1000px; height:1200px; background-color:#00C; font-size:12px">111</div>
    <div id="div2" style="background-color:red;display:none;position:fix;bottom:0px;">222</div>
     
    </body>
    </html>
      

  3.   

    测试过了：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
     
    <body>
     
    <script type="text/javascript">
    var MicCase = {
        //获取滚动条当前的位置
        getScrollTop:function()
        {
            var scrollTop = 0; 
            if (document.documentElement && document.documentElement.scrollTop)
            {
                scrollTop = document.documentElement.scrollTop;
            }
            else if (document.body)
            {
                scrollTop = document.body.scrollTop;
            }
            return scrollTop;
        },
        //获取当前可视范围的高度 
        getClientHeight:function()
        {
            var clientHeight = 0;
            if (document.body.clientHeight && document.documentElement.clientHeight)
            {
                clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
            }
            else
            {
                clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
            }
            return clientHeight; 
        },
        //获取文档完整的高度 
        getScrollHeight:function()
        {
            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
        }
    };
      
      
    window.onscroll = function (){
                var Mic = MicCase;
                if (Mic.getScrollTop() + Mic.getClientHeight() == Mic.getScrollHeight())
                {
                    document.getElementById("div2").style.display="block";
                    document.getElementById("div1").style.fontSize="50px";
                    document.getElementById("div1").innerHTML="方块";
                    document.getElementById("div1").style.color = "red";
                }
                else
                {
                    document.getElementById("div2").style.display="none";
                    document.getElementById("div1").style.fontSize="100px";
                    document.getElementById("div1").innerHTML="没有";
                    document.getElementById("div1").style.color = "yellow";
                }
    }
      
    </script>
     
    <div id="div1" style="width:1000px; height:1200px; background-color:#00C; font-size:12px">111</div><div id="div2" style="background-color:red;display:block;position:fixed;bottom:0;height:300px;width:100%;">222</div>
     
    </body>
    </html>