JS 设置网页下滑时出现的显示、隐藏div事件

最新推荐文章于 2021-09-18 14:44:05 发布

web-小白白

最新推荐文章于 2021-09-18 14:44:05 发布

阅读量2.9k

点赞数 3

分类专栏： JS jQuery 文章标签： js页面滚动

本文链接：https://blog.csdn.net/weixin_45030716/article/details/102766548

版权

JS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

1.HTML：设置body 的 onscroll事件（在元素滚动时执行）

<body onscroll="get()">
    <div id="Slide_downward"></div>
</body>

2.JS代码

function get (){
	//滚动条距离顶部的距离
	var topverb1 = document.documentElement.scrollTop;
        //body文本内容的高度,也可以直接设置文本的高度但不能加 px
	var topverb2 = document.body.scrollHeight;
        //var topverb2 = document.body.scrollHeight="300";
	if(topverb1>=topverb2/3){
		document.getElementById("gethideen").style.display="inherit";
	}else{
		document.getElementById("gethideen").style.display="none";
	}
}

3.jQuery简化代码

	//监听滚动条事件

	$(window).scroll(function () {
		var topp = $(document).scrollTop();
		if (topp >= 200) {
			$(".fixed").css("top", "-132px").css("transition", ".8s");
		} else {
			$(".fixed").css("top", "0").css("transition", ".8s");
		}

	});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

web-小白白

关注关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS 设置网页下滑时出现的显示、隐藏div事件

1.HTML：设置body 的 onscroll事件（在元素滚动时执行）<body onscroll="get()"> <div id="Slide_downward"></div></body>2.JS代码function get (){ //滚动条距离顶部的距离 var topverb1 = document.doc...
复制链接

扫一扫