求用原生js代码实现下拉到一定高度显示一个div 往上拉的时候又消失

qingwadaxia_1 2017-05-13 09:42:18

求用原生js代码实现下拉到一定高度显示一个div 往上拉的时候又消失

有点类似于一些网站中开始打开网页的时候是没出现的然后下拉到一定高度的时候右下角就会出现一个回到顶部的提示，如果网上拉的话低于了一定的高度那个回到顶部的提示又会消失

原生js实现的不用jquery

...全文

527 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

qingwadaxia_1 2017-05-15

打赏
举报

引用 5 楼 qq_29594393 的回复:

思路已经很清晰了,具体的做法,自己修改如果想要设置高度的话,把window.innerHeight 换成你想要的数值就行了,不再回复了

汗。。直接改数值像素好像还是不行麻烦您了不好意思

当作看不见 2017-05-15

打赏
举报

思路已经很清晰了,具体的做法,自己修改如果想要设置高度的话,把window.innerHeight 换成你想要的数值就行了,不再回复了

qingwadaxia_1 2017-05-15

打赏
举报

引用 3 楼 qq_29594393 的回复:

在HTML里面的id名,直接在js 里面就是dom对象的变量. var top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 替换掉上面top 的定义就好了

大神可以了不过还有个问题这个好像不能说自由设置高度去显示隐藏吧

当作看不见 2017-05-15

打赏
举报

在HTML里面的id名,直接在js 里面就是dom对象的变量. var top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 替换掉上面top 的定义就好了

qingwadaxia_1 2017-05-15

打赏
举报

引用 1 楼 qq_29594393 的回复:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="Wsws">sss</div>
		<div></div>
		<div id=""></div>
		<span id="tag">这里</span>
	</body>
</html>
<style type="text/css">
	#wsws{
		color: green;
	}
	div{
		min-height: 700px;
		width: 400px;
		border: 1px solid royalblue;
	}
	#tag{
		top:150px;
		right: 50px;
		position: fixed;
		width: 60px;
		height: 60px;
		display: block;
		background-color: darkgoldenrod;
		visibility: hidden;
	}
</style>
<script type="text/javascript">
	window.onscroll=function(){
		var top = document.getElementsByTagName("body")[0].scrollTop;
		console.log(window.outerHeight);
		if(top>window.innerHeight){
			tag.style.visibility = "visible";
		}else{
			tag.style.visibility = "hidden";
		}
		console.log(top);
	}
</script>

引用 1 楼 qq_29594393 的回复:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="Wsws">sss</div>
		<div></div>
		<div id=""></div>
		<span id="tag">这里</span>
	</body>
</html>
<style type="text/css">
	#wsws{
		color: green;
	}
	div{
		min-height: 700px;
		width: 400px;
		border: 1px solid royalblue;
	}
	#tag{
		top:150px;
		right: 50px;
		position: fixed;
		width: 60px;
		height: 60px;
		display: block;
		background-color: darkgoldenrod;
		visibility: hidden;
	}
</style>
<script type="text/javascript">
	window.onscroll=function(){
		var top = document.getElementsByTagName("body")[0].scrollTop;
		console.log(window.outerHeight);
		if(top>window.innerHeight){
			tag.style.visibility = "visible";
		}else{
			tag.style.visibility = "hidden";
		}
		console.log(top);
	}
</script>

大神为什么tag可以直接拿来用不需要设置变量还有就是说这个不兼容ie 有完美兼容的方法吗

当作看不见 2017-05-14

打赏
举报


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="Wsws">sss</div>
		<div></div>
		<div id=""></div>
		<span id="tag">这里</span>
	</body>
</html>
<style type="text/css">
	#wsws{
		color: green;
	}
	div{
		min-height: 700px;
		width: 400px;
		border: 1px solid royalblue;
	}
	#tag{
		top:150px;
		right: 50px;
		position: fixed;
		width: 60px;
		height: 60px;
		display: block;
		background-color: darkgoldenrod;
		visibility: hidden;
	}
</style>
<script type="text/javascript">
	window.onscroll=function(){
		var top = document.getElementsByTagName("body")[0].scrollTop;
		console.log(window.outerHeight);
		if(top>window.innerHeight){
			tag.style.visibility = "visible";
		}else{
			tag.style.visibility = "hidden";
		}
		console.log(top);
	}
</script>