JS实现随页面滚动显示/隐藏窗口固定位置元素
更新时间：2016年02月26日 09:06:51 作者：T.//王大胖
窗口固定位置显示元素，当页面高度大于某高度，并且页面向下滚动时，显示该元素；当页面位置小于某高度，或者页面向上滚动时，隐藏该元素，下面通过本文给大家介绍JS实现随页面滚动显示/隐藏窗口固定位置元素，需要的朋友参考下吧
窗口固定位置显示元素，当页面高度大于某高度，并且页面向下滚动时，显示该元素；当页面位置小于某高度，或者页面向上滚动时，隐藏该元素。
先给大家展示下效果图：
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进行获取、判断、删除、增加等等，感兴趣的朋友可以了解下2013-12-12
本篇文章主要是对使用js判断控件是否获得焦点的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
每天都有大量网友申请加入我的团队，于是审核团队新成员成了一个费力气的活儿，在此情况下，我写了个脚本，自动计算他们的回答采纳率，采纳率低于20%的自动打勾 选中，等级太低的人也自动打勾选中2014-02-02
下面小编就为大家带来一篇require简单实现单页应用程序(SPA)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了微信小程序分享功能之按钮button 边框隐藏和点击隐藏,需要的朋友可以参考下2018-06-06
用js实现的拖动表格的tr行的实现代码，需要的朋友可以参考下。2011-05-05
JS中type="button"和type="submit"的区别
Submit是专门用于提交表单的Button，与Button的区别主要有两点：type=button 就单纯是按钮功能，type=submit 是发送表单 。下面通过本文给大家分享JS中type="button"和type="submit"的区别，感兴趣的的朋友一起看看吧2017-07-07
这篇文章主要是对js控制的导航菜单实例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了JavaScript懒加载与预加载，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
本文详细介绍了JavaScript中Date类型的处理方法,包括日期的格式转换和获取特定月份或周的日期区间,本文介绍JS日期转化指定格式及获取月/周日期区间的方法,感兴趣的朋友跟随小编一起看看吧2024-09-09
最新评论