手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS实现随页面滚动显示/隐藏窗口固定位置元素
JS实现随页面滚动显示/隐藏窗口固定位置元素
摘要:窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素;当页面位置小于某高度,或者页面向上滚动时,隐藏该元素。先给大家展...

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

先给大家展示下效果图:

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

1.html

<p id="selected-case-count"><span>已选: <span>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实现随页面滚动显示/隐藏窗口固定位置元素】相关文章:

显示、隐藏密码

JavaScript实现鼠标拖动效果的方法

jQuery实现给页面换肤的方法

jQuery页面的滚动位置scrollTop、scrollLeft

javascript实现图片跟随鼠标移动效果的方法

Javascript特效:随机显示图片的源代码

JS实现跳转代码:多域名指向同一空间

JS实现定时自动关闭DIV层提示框的方法

JS实现窗口加载时模拟鼠标移动的方法

javascript实现在网页任意处点左键弹出隐藏菜单的方法

精品推荐
分类导航