css如何让元素随窗口移动,JS实现随页面滚动显示/隐藏窗口固定位置元素

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

先给大家展示下效果图:

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

$("#selected-case-count").fadeOut(200);

}elseif ($(window).scrollTop()>600){

$("#selected-case-count").fadeIn(500);

}else{

$("#selected-case-count").fadeOut(500);

}

preTop=$(window).scrollTop();

});

});

以上所述是小编给大家分享的JS实现随页面滚动显示/隐藏窗口固定位置元素的相关知识,希望对大有所帮助!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值