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实现随页面滚动显示/隐藏窗口固定位置元素的相关知识,希望对大有所帮助!

相关文章

  • JS实现两表格里数据来回转移的方法

    JS实现两表格里数据来回转移的方法

    这篇文章主要介绍了JS实现两表格里数据来回转移的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • JS实现点击按钮自动增加一个单元格的方法

    JS实现点击按钮自动增加一个单元格的方法

    这篇文章主要介绍了JS实现点击按钮自动增加一个单元格的方法,实例分析了javascript操作表格单元格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 微信小程序视图控件与bindtap之间的问题的解决

    微信小程序视图控件与bindtap之间的问题的解决

    这篇文章主要介绍了微信小程序视图控件与bindtap之间的问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 详解在HTTPS 项目中使用百度地图 API

    详解在HTTPS 项目中使用百度地图 API

    这篇文章主要介绍了在HTTPS 项目中使用百度地图 API,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 完美实现js焦点轮播效果(一)

    完美实现js焦点轮播效果(一)

    这篇文章主要为大家详细介绍了完美实现js焦点轮播效果的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS动态计算移动端rem的解决方案

    JS动态计算移动端rem的解决方案

    移动设备分辨率五花八门虽然我们可以通过CSS3的media query来实现适配,但是这种做法并不能适配所有设备,这篇文章主要介绍了js动态计算移动端rem的解决方案,非常不错,感兴趣的朋友一起看看吧
    2016-10-10
  • 解决JavaScript中0.1+0.2不等于0.3问题

    解决JavaScript中0.1+0.2不等于0.3问题

    这篇文章主要介绍了解决JavaScript中0.1+0.2不等于0.3问题,需要的朋友可以参考下
    2018-10-10
  • 浅谈JavaScript中的“!!”作用

    浅谈JavaScript中的“!!”作用

    这篇文章主要介绍了浅谈JavaScript中的“!!”作用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • js判断文本框剩余可输入字数的方法

    js判断文本框剩余可输入字数的方法

    这篇文章主要介绍了js判断文本框剩余可输入字数的方法,可实现直观显示文本框可输入字数的功能,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • 常常会用到的截取字符串substr()、substring()、slice()方法详解

    常常会用到的截取字符串substr()、substring()、slice()方法详解

    javascript中给我们提供三个截取字符串的方法,分别是:slice(),substring()和substr()。下面我们对这三个函数进行详细说明和比较,需要的朋友可以参考下
    2015-12-12

最新评论