javascript - Jquery - 向下滚动时将元素包装在 div 中，向上滚动时展开

Question

我已经弄清楚如何使用 jquery 将元素包装在 div 中。 但是，我想在您向下滚动时将其包裹在 div 中，并在您向上滚动时展开它。

可行吗？

我已经想出了将它向下滚动的方法。但我认为逻辑上存在缺陷，因为当我向下滚动时，包装一直在执行。它应该只在我滚动通过 500px 后执行一次。

谢谢!

<script>


$(function() {
//caches a jQuery object containing the header element
var header = $(".show-on-scroll-wrapper");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
          $('.mobile-nav-toggle-label').wrapAll('<div id="showOnScrollWrapper" class="show-on-scroll-wrapper show"></div>'); 
        //the wrapping should only happen once 
    } else {
        //needs to be able unwrap the div if I scroll back to the top
    }
});

});

Answer 1

您可以存储对包装对象的引用，并且仅在引用为 null 时才对其进行包装。然后对于其他你可以简单地用它的内容替换引用:

$(function() {
    //caches a jQuery object containing the header element
    var $showOnScrollWrapper = null;
    var header = $(".show-on-scroll-wrapper");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 500) {
        if (null === $showOnScroll) {
            $showOnScrollWrapper = $('<div id="showOnScrollWrapper" class="show-on-scroll-wrapper show"></div>');
            $('.mobile-nav-toggle-label').wrapAll($showOnScrollWrapper); 
        }
    } else if ($showOnScrollWrapper !== null) {
        $showOnScrollWrapper.replaceWith($showOnScrollWrapper.html());
        $showOnScrollWrapper = null;
    }
});