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

最新推荐文章于 2022-08-22 15:00:54 发布

T-王大胖

最新推荐文章于 2022-08-22 15:00:54 发布

阅读量584

点赞数

本文链接：https://blog.csdn.net/buaawp/article/details/50804178

版权

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