求助高手帮忙，下拉到底部会让尾部的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显示，然后继续下拉尾部又消失了，

怎么才能下拉到尾部时，尾部内容能出现，然后滚动条到下面，然后上拉内容消失？
...全文
407 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
div+css网站布局案例精粹(第2版)30个书本案例代码及文件，学习必备。另有50个赠送案例的全部代码及文件，因小弟只有最大60MB上传权限，所以只能分两个资源上传。
潮流非主流divcss模板javascript
潮流非主流divcss模板javascript
帝国CMS 非主流阁DIV+CSS模板
帝国CMS 非主流阁DIV+CSS模板
前端设计课程大作业.zip
1、设计的目的 做个网站以怀念个人旅游的日子。还有此刻的美丽,以及无限的未来向往。 2、设计布局 主页设计布局是在网站的左上角是网站标题名称、当前在线人数等，有背景图引入，右上角有个人头像模态下拉框，点击出现下拉列表，包含我的旅游日记、个人中心、退出等链接，还有登录、注册按钮，点击登录按钮来到登录页面，网站设计初衷就是自己要登录后才能发布旅游日记，这样更能保证私密性。网站中央是内容，包含三大板块，分别是最热、最新、话题三个主题驿站，每个主题下面是列出5条内容日记的标题链接，点击对应链接跳转到日记详情页面，最热代表浏览次数最多，最新就是根据发布旅游日记的时间来排序，最新发的日记内容排在最前面，话题是根据这次发布旅游日记的主题来排序的。网站尾部的左下角是网站设计目的简介，右下角分别是个人联系方式、合作方式、赞助商本人等。点击名字会弹出图片。 3、网站具体设计过程 首先选定 本网页制作工具是前端开发利器： WebStorm，创建前端项目工程，并创建相应的文件夹，存放各个css、js，还有网页中用到的各种图片，以及除了主页面index.html之外的二级页面，其存放在html文件夹下，在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径，创建好的项目工程目录结构如下所示; 首先设计网站主页也就是核心内容index.html，所有的二级页面都可以从主页跳转过去，相应的二级页面也都有主页的链接，可以随时返回到主页面。页面总体采用 CSS+DIV 布局，最外层DIV为框架，对重复页面代码进行抽取，比如网站头部用header.html来代替，网站底部用footer.html来代替，在各个要引用的网页上直接在其头部和尾部用iframe标签引入即可（），在背景图引入时采用（background-image:url("../pic/backpic.jpeg"); background-repeat: no-repeat; background-size:100% a）background-image标签进行操作。在日记链接显示以及网站底部链接上采用ui、li标签，在中屏显示的最新、最热、话题等主题下的具体旅游日记标题。
div+css实现仿淘宝的产品分类菜单效果代码
主要为大家介绍了div+css实现仿淘宝的产品分类菜单效果代码,通过div+css实现仿淘宝布局效果的功能,非常简单实用,需要的朋友可以参考下
JavaScript

87,993

社区成员

224,689

社区内容

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

加载中

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

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

+ 用AI写文章