您的位置：首页 > 其它

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

2016-02-25 22:43 686 查看

0.效果

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

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();
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航