Javascript 如何使固定元素在滚动时隐藏，然后在用户不滚动时显示

我有一个隐藏元素，它获取

display:block当用户滚动一定数量的像素时，当用户到达页面的某个点时隐藏。这在台式电脑和笔记本电脑上运行良好。但问题是平板电脑。我有iPad2和三星GalaxyTab4。这个固定的元素会导致两个平板电脑上的滚动变慢。我制作了一个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");
                    }));
                }
            }
        });
    }
}

函数hideElementsOnScroll（）{
主体变量=$（“主体”）；
if（body.hasClass（“ipad”）| | body.hasClass（“tablet chrome”））{
$（窗口）。滚动（函数（）{
var windowTop=$（window.scrollTop（）；
var offsetTop=$（“#sd制表符”）.offset（）.top；
if（windowTop>=offsetTop&&$（“.scroll tabs”）.hasClass（“stickyTabs”））{
$（窗口）。滚动（$.debounce（0，true，function（））{
$（“.scroll tabs”）.css（“可见性”、“隐藏”）；
}));
$（窗口）。滚动（$.debounce（100，函数（）{
$（“.scroll tabs”）.css（“可见性”、“可见”）；
}));
}否则{
如果（窗口顶部<偏移）{
$（“.scroll tabs”）.css（“可见性”、“隐藏”）；
$（窗口）。滚动（$.debounce（1，true，function（））{
$（“.scroll tabs”）.css（“可见性”、“隐藏”）；
}));
$（窗口）。滚动（$.debounce（1，函数（）{
$（“.scroll tabs”）.css（“可见性”、“隐藏”）；
}));
}
}
});
}
}

有这样的插件吗？或者我需要编辑我的功能吗？
在移动设备上，滚动事件通常会延迟到滚动结束，以提高浏览器的性能，然后所有事件都会立即执行。那不是你想要的

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

相反，尝试结合使用on（“touchstart”）或一个（“touchmove”）和滚动去盎司，类似于：


函数隐藏滚动（选择器、容器）{
var$container=$（容器| |窗口），
$elements=$（选择器，$container），
showElement=$.debounce（500，函数（）{
$elements.css（“可见性”、“可见”）；
});
$container.on（“touchstart”，函数（）{
$container.off（“滚动”，showElement）；
$elements.css（“可见性”、“隐藏”）；
$container.one（“touchend”，function（））{
$container.on（“滚动”，showElement）；
});
});
}
hideOnScroll（'nav'，'.container'）
html，正文{
身高：100%；
保证金：0；
}
.容器{
身高：100%；
溢出：自动；
位置：相对位置；
}
文章{
高度：10000px；
}
导航{
显示：块；
宽度：100%；
高度：50px；
背景色：黑色；
位置：固定；
排名：0；
左：0；
}

（b.cobobobo元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元{l（）}否则{if（f！==true）{h=setTimeout（i？k:l，i==c？e-m:e）}}if（$.guid）{g.guid=j.guid=j.guid |$.guid++}返回g}；$.debounce=function（d，e，f）{return f==c？a（d，e，false）：a（d，f，e！==false）}（this）通过@RiZKiT的回答，我能够解决我的问题。我将on（“touchstart”）和on（“touchend”）与去盎司组合在一起，实现了以下功能：

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

也许有人可以在他们的项目中使用此功能
首先，很高兴我的信息对您有所帮助。但是，您的解决方案在每个touchstart上都会创建大量事件，它们的计数非常快，高达数千！尝试将
console.log（'show'）
添加到
$（“.scrollable”）.css（“可见性”、“可见”）。这就是为什么我用一个例子来改进我的答案，说明如何做得更优雅。如果您有问题，请随时提问。