2016-01-14 2 views
0

У меня есть сценарий jQuery, который должен сделать div имеющим фиксированную позицию после того, как пользователь попадет в нужное место страницы. Более того, скрипт добавляет новые элементы html в DOM, используя wrapAll(). Проблема заключается в том, что каждый раз, когда пользователь прокручивается в нужное место, добавляется новый набор элементов html, а в инструкции else функция unwrap() не работает.jQuery выполнить оператор if только один раз и развернуть элементы

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' 
     }); 
    } 
}); 
}); 

Любые идеи?

Demo here

+0

Вы можете разместить демо? –

+0

В качестве примечания стороны: поскольку идентификаторы должны быть уникальными в контексте документа, вам не нужно использовать 'wrapAll()', 'wrap()' достаточно –

+0

Обновленный вопрос с демонстрационной благодарностью. –

ответ

0

Попробуйте эту проверку

if($("#stiky-btn").parent('.navbar').length == 0){ 
    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>'); 
} 
+0

Во-первых, 'navbar' - это класс, во-вторых, как это исправить проблему OP ??? –

+0

он проверит, что элемент уже завернут или нет –

+0

Ya, это хороший момент! Но я предполагаю, что вместо этого нужно использовать для разворачивания элемента (или обоих) –

Смежные вопросы