如何实现社交图标随页面滚动先显示后再次隐藏？

嘿，这个需求很容易搞定，只需要在你现有的滚动事件逻辑里，增加一个区间判断就可以啦！

核心逻辑调整 #

你之前的代码只处理了「滚动超过950显示」和「否则隐藏」的情况，现在我们需要把判断条件改成：

• 当滚动距离在 950 < 滚动距离 < 1500 这个区间时，显示社交图标
• 当滚动距离 ≤950 或者 ≥1500 时，隐藏图标

修改后的完整代码 #

$(document).ready(function(){
    $('.hide-show').hide(); // 页面加载时默认隐藏图标
    $(window).scroll(function () {
        var y = $(this).scrollTop(); // 获取当前滚动距离
        // 判断滚动距离是否在目标区间内
        if (y > 950 && y < 1500) {
            $('.hide-show').fadeIn(); // 区间内淡入显示
        } else {
            $('.hide-show').fadeOut(); // 区间外淡出隐藏
        }
    });
});

代码说明 #

1. 初始状态：页面加载完成后先隐藏.hide-show元素，和你原来的逻辑保持一致
2. 滚动事件监听：每次滚动时获取当前滚动距离y
3. 区间判断：只有当滚动距离处于950到1500之间时，才会显示图标，其他情况（包括滚动到1500及以上、回到950以下）都会隐藏图标

这样设置后，就能完美实现你想要的「滚动到950显示，滚动到1500再次隐藏」的效果啦！

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