求助高手帮忙，下拉到底部会让尾部的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
  • 打赏
  • 举报
 回复
请问怎么解决
div+css网站布局案例精粹(第2版)30个书本案例代码2015
例如，你可以定义一个类（class）或ID（identifier），然后将其应用到多个Div上，统一管理样式。此外，CSS还支持盒模型，用于控制元素的边距、内填充和边框，进一步精细化布局。浮动（float）、定位（positioning）...
潮流非主流divcss模板javascript
5. **页面滚动效果**：如滚动到页面底部自动加载更多内容（无限滚动）、滚动时固定头部等。 6. **弹出框**：如提示信息、登录注册窗口等，增强用户体验。 在提供的压缩包文件中，“templatemo_style.css”是样式表...
帝国CMS 非主流阁DIV+CSS模板
2. **自定义头部和尾部**：允许用户根据需要自定义网站的头部和尾部，如logo、导航菜单、页脚链接等。 3. **内容区块**：通过DIV划分不同的内容区域，如文章列表、侧边栏、广告位等。 4. **色彩主题**：使用非主流...
前端设计课程大作业.zip
1、设计的目的 做个网站以怀念个人旅游的日子。还有此刻的美丽,以及无限的未来向往。...在日记链接显示以及网站底部链接上采用ui、li标签，在中屏显示的最新、最热、话题等主题下的具体旅游日记标题。
div+css实现仿淘宝的产品分类菜单效果代码
在探讨如何使用div和css实现仿淘宝的产品分类菜单效果代码前，我们需要先了解几个基础概念，包括CSS布局技术、div元素以及与淘宝网菜单相似的界面设计。以下知识点将围绕这些概念进行展开。 首先，CSS（层叠样式表...
JavaScript

87,993

社区成员

224,694

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章