如何用JavaScript实现移动端滚动200px后显示按钮且不隐藏？

你当前的代码会在滚动回顶部时移除show类，导致按钮隐藏。要实现“一旦显示就不再隐藏”的效果，只需调整JavaScript逻辑，确保类一旦添加就不再移除，同时可优化为仅在移动端触发。

修改后的JavaScript代码 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var offset = 200;
// 标记按钮是否已显示，避免重复执行添加类操作
var hasShown = false;

$(window).on('load scroll', function(){
    // 仅在移动端执行逻辑（可根据你的需求调整断点宽度，比如768px）
    if ($(window).width() < 768) {
        if ($(window).scrollTop() > offset && !hasShown) {
            $('body').addClass('show');
            hasShown = true; // 标记为已显示，后续滚动不再触发添加操作
        }
    }
});
</script>

CSS代码（保持原有逻辑，替换实际选择器） #

/* 把selector替换成你的按钮实际CSS选择器，比如.mobile-action-btn */
.mobile-action-btn{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
body.show .mobile-action-btn{
    opacity: 1;
}

逻辑说明 #

1. 新增hasShown变量：确保show类只被添加一次，避免滚动过程中重复触发addClass操作，提升性能
2. 移动端判断：通过窗口宽度筛选，仅在移动端执行滚动触发逻辑（可根据你的响应式断点调整宽度值）
3. 移除移除类逻辑：删掉原代码中else分支的removeClass操作，一旦show类被添加到body上，就不会再被移除，直到页面刷新或跳转至其他页面

内容的提问来源于stack exchange，提问作者jm789