如何使固定元素在滚动时隐藏，然后在用户不滚动时出现

Question

我有一个隐藏元素，当用户滚动一定数量的像素时会得到display: block;，并在用户到达页面的某个点时隐藏。这适用于台式电脑和笔记本电脑。但问题是平板电脑。我有 iPad 2 和三星 Galaxy Tab4。该固定元素导致两个平板电脑上的滚动变得迟缓。我制作了一个 JavaScript 函数，当你滚动时隐藏元素，当你不滚动时再次显示它。它有效，但确实很慢。当您开始滚动时，它会在您从屏幕上松开手指时隐藏元素。它只是不太好用。

代码如下：

function hideElementsOnScroll() {
    var body = $("body");

    if(body.hasClass("ipad") || body.hasClass("tablet-chrome")) {
        $(window).scroll(function() {
            var windowTop = $(window).scrollTop();
            var offsetTop = $("#sd-tabs").offset().top;

            if(windowTop >= offsetTop && $(".scroll-tabs").hasClass("stickyTabs")) {
                $(window).scroll($.debounce( 0, true, function() {
                    $(".scroll-tabs").css("visibility", "hidden");
                }));
                $(window).scroll($.debounce( 100, function() {
                    $(".scroll-tabs").css("visibility", "visible");
                }));
            } else {
                if(windowTop < offsetTop) {
                    $(".scroll-tabs").css("visibility", "hidden");
                    $(window).scroll($.debounce( 1, true, function() {
                        $(".scroll-tabs").css("visibility", "hidden");
                    }));
                    $(window).scroll($.debounce( 1, function() {
                        $(".scroll-tabs").css("visibility", "hidden");
                    }));
                }
            }
        });
    }
}

有这样的插件吗？还是我需要编辑我的函数？

Answer 1

在移动设备上，滚动事件通常会延迟到滚动结束，以提高浏览器的性能，然后事件全部立即执行。这不是你想要的。

在滚动时检查位置，在移动设备的当前标准下总是滞后的。所以我建议放弃在移动设备上在一定数量的像素之后隐藏元素的想法。

相反，尝试使用 on("touchstart") 或 one("touchmove") 和滚动去抖动的组合，类似这样：

function hideOnScroll(selector, container){
    var $container = $(container || window),
    	$elements = $(selector, $container),
    	showElement = $.debounce(500, function() {
            $elements.css("visibility", "visible");
        });
    $container.on("touchstart", function() {
       	$container.off("scroll", showElement);
        $elements.css("visibility", "hidden");
        $container.one("touchend", function() {
            $container.on("scroll", showElement);
        });
    });
}
hideOnScroll('nav', '.container');

html, body { 
    height: 100%;
    margin: 0;
}
.container { 
    height: 100%;
    overflow: auto;
    position: relative;
}
article {
    height: 10000px;
}
nav { 
    display: block; 
    width: 100%; 
    height: 50px;
    background-color: black; 
    position: fixed;
    top: 0;
    left: 0;
}

<div class="container">
    <nav></nav>
    <article class="content"></article>
</div>

<!-- jquery & debounce -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);</script>

Answer 2

通过@RiZKiT 的回答，我能够解决我的问题。我将 on("touchstart") 和 on("touchend") 与 debounce 结合起来，制作了这个函数：

function hideElementsOnScroll() {
    var body = $("body");
    if(body.hasClass("ipad") || body.hasClass("tablet-chrome")) {
        $(window).on("touchstart", function() {
            $(".scrollable").css("visibility", "hidden");
        });
        $(window).on("touchend", function() {
            $(window).scroll(function() {
                $(window).scroll($.debounce( 1, true, function() {
                    $(".scrollable").css("visibility", "hidden");
                }));
                $(window).scroll($.debounce( 1, function() {
                    $(".scrollable").css("visibility", "visible");
                }));
            });
        });
    }
}

也许有人可以在他们的项目中使用这个功能