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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
jQuery Ajax全解析
Feb 13 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
如何制作自己的原生JavaScript路由
May 05 Javascript
学习使用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
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
img标签中onerror用法
2009/08/13 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python实现的knn算法示例
2018/06/14 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python可以实现栈的结构吗
2020/05/27 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
求职信范文英文版
2014/01/05 职场文书
先进个人事迹材料
2014/01/25 职场文书
医药销售求职信范文
2014/02/01 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
10的分与合教学反思
2014/04/30 职场文书
投标服务承诺书
2014/05/28 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
正规借条模板
2015/05/26 职场文书
php 原生分页
2021/04/01 PHP
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL