已选:

JS实现随页面滚动显示/隐藏窗口固定位置元素

网络编程 JS实现随页面滚动显示/隐藏窗口固定位置元素 06-22

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

先给大家展示下效果图:

查看图片

1.html

<p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 

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<preTop){
$("#selected-case-count").fadeOut(200);
}elseif ($(window).scrollTop()>600){
$("#selected-case-count").fadeIn(500);
}else{
$("#selected-case-count").fadeOut(500);
}
preTop=$(window).scrollTop();
});
});

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

理解javascript中Map代替循环
本文介绍了map给我们的js编程带来的好处及便利:1.Map能干什么map可以实现for循环的功能:!DOCTYPEhtmlhtmlheadlang="en"metacharset="UTF-8"title/title/headbodyscriptvararr=[

超实用的JavaScript表单代码段
整理了下比较实用的Javascript表单代码段,分享给大家供大家参考,具体内容如下1多个window.onload方法由于onload方法时在页面加载完成后,自动调用的。

js判断鼠标位置是否在某个div中的方法
本文实例讲述了js判断鼠标位置是否在某个div中的方法。分享给大家供大家参考,具体如下:div的onmouseout事件让div消失时,会出现这样的情况,就是当


编辑:广州明生医药有限公司

标签:位置,页面,元素,给大家,方法