JS滚动到某地方显示或隐藏

js滑动到某个地方,显示或隐藏

$(window).scroll(function () {
	 
		var scroll= $(document).scrollTop();  //滚动条滚动的动态高度
		var text = document.body.scrollHeight //文章高度
		
	//2000是指,你想到达的地方隐藏或显示,2000,怎么得到的,是text-scroll
		 if (scroll > text-2000) {
		 //隐藏到-132px后
    			$("#buttons_none").css("bottom", "-132px").css("transition", ".8s");
        	}else {
        	//显示出来
        		$("#buttons_none").css("bottom", "0").css("transition", ".8s");
    		}
	
 
	});
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以使用CSS属性`position: fixed`和JavaScript来实现页面滚动时顶端固定导航的显示隐藏。 首先,在CSS中设置导航栏的基本样式,并将其设置为`position: fixed`和`top: 0`,使其固定在页面顶部。然后,使用JavaScript来监听页面滚动事件,并且通过判断页面滚动距离来控制导航栏的显示隐藏。 具体实现代码如下: HTML部分: ```html <nav class="navbar"> <!-- 导航栏内容 --> </nav> ``` CSS部分: ```css .navbar { position: fixed; top: 0; /* 其他样式 */ } ``` JavaScript部分: ```javascript var navbar = document.querySelector(".navbar"); var lastScrollTop = 0; window.addEventListener("scroll", function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > lastScrollTop) { // 向下滚动 navbar.classList.add("hide"); } else { // 向上滚动 navbar.classList.remove("hide"); } lastScrollTop = scrollTop; }); ``` 在上面的代码中,我们首先获取到导航栏的DOM元素,并且记录下上一次滚动时的距离(`lastScrollTop`)。然后,监听`scroll`事件,并且在事件处理函数中获取当前页面的滚动距离(`scrollTop`),通过与上一次滚动距离的大小比较,来判断用户是向上滚动还是向下滚动。如果是向下滚动,则给导航栏添加`hide`类,隐藏导航栏;如果是向上滚动,则移除`hide`类,显示导航栏。 最后,在CSS中定义`.hide`类来实现导航栏的隐藏效果,例如: ```css .navbar.hide { transform: translateY(-100%); transition: transform 0.3s ease-in-out; } ``` 上面的代码中,我们使用`transform`属性来将导航栏向上移动`100%`的高度,实现隐藏效果。并且使用`transition`属性来添加过渡效果,让隐藏显示更加平滑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_42456392

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值