html 隐藏但是位置好保留,随页面滚动显示/隐藏窗口固定位置元素_html/css_WEB-ITnose...

本文介绍了一种网页设计中常见的效果窗口元素显示控制方法。通过HTML、CSS和JavaScript结合使用,实现了一个特定元素(例如计数器)在页面滚动到一定高度时出现,当页面上滑或高度不足时隐藏的效果。此方案适用于需要在特定条件下展示额外信息的网页布局。

0.效果

窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素;当页面位置小于某高度,或者页面向上滚动时,隐藏该元素。

1.html

已选: 0

2.css

p#selected-case-count{ position:fixed; /*固定元素位置*/ top:2px; /*距顶端举例*/ right:40px; /*距右侧位置*/ color:red; }

3.js

$(function() { $("#selected-case-count").hide();});var preTop=0;var currTop=0;$(function () { $(window).scroll(function(){ currTop=$(window).scrollTop(); if(currTop

600){ $("#selected-case-count").fadeIn(500); }else{ $("#selected-case-count").fadeOut(500); } preTop=$(window).scrollTop(); });});

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值