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

yld2017 2017-03-23 09:49:50


<!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显示,然后继续下拉尾部又消失了,

怎么才能下拉到尾部时,尾部内容能出现,然后滚动条到下面,然后上拉内容消失?
...全文
400 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
okkk 2017-04-06
  • 打赏
  • 举报
回复
测试过了:
<!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>
okkk 2017-04-06
  • 打赏
  • 举报
回复
<!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>
m0_37173037 2017-04-01
  • 打赏
  • 举报
回复
你把==改为>=试一试
m0_37173037 2017-04-01
  • 打赏
  • 举报
回复
仔细分析一下window.onscroll匿名函数的条件判断,问题就出在条件判断上
yld2017 2017-04-01
  • 打赏
  • 举报
回复
引用 4 楼 m0_37173037 的回复:
你把==改为>=试一试
依然不好使
yld2017 2017-03-31
  • 打赏
  • 举报
回复
求助下
yld2017 2017-03-26
  • 打赏
  • 举报
回复
请问怎么解决

87,993

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧