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


Posted in Javascript onFebruary 26, 2016

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

先给大家展示下效果图:

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 相关文章推荐
中文字符串截取的js函数代码
Apr 17 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 #Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 #Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 #Javascript
javascript动态获取登录时间和在线时长
Feb 25 #Javascript
基于javascript实现动态时钟效果
Aug 18 #Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 #Javascript
灵活的理解JavaScript中的this指向
Feb 25 #Javascript
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
短波收音机简介
2021/03/01 无线电
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
js 颜色选择插件
2017/01/23 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
解决Python使用列表副本的问题
2019/12/19 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
关于打架的检讨书
2014/01/17 职场文书