Создание элемента фиксированной позиции из произвольного положения в прокрутке

Question

У меня есть фиксированный заголовок и вы хотите добавить дополнительный фиксированный элемент под заголовком, когда кто-то прокручивается до этого элемента. Мне удалось приблизиться к нему, за исключением случаев, когда я прокручиваю новый фиксированный элемент, немного подпрыгивая, и я не могу понять, почему.

$(window).scroll(function() { 
    height2 = $('#product_nav_cont').offset().top; 
    scroll2 = $(this).scrollTop(); 
    header2 = $('#scroll_header_cont').outerHeight(); 
    pos2 = height2-header2 

    if(scroll2 > pos2) { 
     $('#product_nav_cont').css({'position':'fixed','top':header2,'width':'100%'}); 
    } else { 
     $('#product_nav_cont').css({'position':'static','top':'0'}); 
    } 
}); 

Я думаю, что это может иметь что-то делать с переменной «высотой 2», возможно, это положение меняется на свитку из-за элемент фиксируется при прокрутке страницы вниз, но я не мог понять это, если это даже проблема. Любые идеи очень ценятся.

Вы можете просмотреть этот вопрос на, http://jsfiddle.net/LbpkLko8/1/

Answer 1

Вы должны поместить переменные header2 и вне высота 2 функции прокрутки. Вот ваш updated fiddle и новый код:

header2 = $('#scroll_header_cont').outerHeight(); 
height2 = $('#product_nav_cont').offset().top; 

$(window).scroll(function() { 
    scroll2 = $(this).scrollTop(); 
    pos2 = height2-header2 

    if(scroll2 > pos2) { 
     $('#product_nav_cont').css({'position':'fixed','top':header2,'width':'100%'}); 
    } else { 
     $('#product_nav_cont').css({'position':'static','top':'0'}); 
    } 
});