jQuery 只执行一次 if 语句并解包元素

我有一个jQuery脚本，一旦用户进入页面的正确位置，它应该使div具有固定的位置。不仅如此，该脚本还使用 wrapAll（） 向 DOM 添加新的 html 元素。问题是每次用户滚动到正确的位置时，都会添加一组新的 html 元素，并且在 else 语句中 unwrap（） 不起作用。

jQuery(document).ready(function () {
// This function will be executed when the user scrolls the page.
jQuery(window).scroll (function(e) {
    // Get the position of the location where the scroller starts.
    var scroller_anchor = jQuery(".get-started").offset().top;
    // Check if the user has scrolled and the current position is after the scroller start location and if its not already fixed at the top 
    if (jQuery(this).scrollTop() >= scroller_anchor && jQuery('.get-a-quote').css('position') != 'fixed' ) 
    {    // Change the CSS of the scroller to hilight it and fix it at the top of the screen.
        jQuery('.get-a-quote').css({
            'position': 'fixed',
            'top': '0px'
        });
        jQuery('#stiky-btn').wrapAll('<nav class="navbar navbar-default navbar-fixed-top"><div class="container"><div id="navbar" class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-right"></ul></div></div></nav>');
        // Changing the height of the scroller anchor to that of scroller so that there is no change in the overall height of the page.
        jQuery('.get-started').css('height', '50px');
    } 
    else if (jQuery(this).scrollTop() < scroller_anchor && jQuery('.get-a-quote').css('position') != 'relative') 
    {    // If the user has scrolled back to the location above the scroller anchor place it back into the content.
        // Change the height of the scroller anchor to 0 and now we will be adding the scroller back to the content.
        jQuery('.get-started').css('height', '0px');
        jQuery("#stiky-btn").unwrap();
        // Change the CSS and put it back to its original position.
        jQuery('.get-a-quote').css({
            'position': 'relative'
        });
    }
});
});

有什么想法吗？

在这里演示