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时才包装它。然后对于else，您可以简单地用引用替换它的内容：

$(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;
    }
});

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

1 个答案: