Прикрепленный заголовок заголовок к началу до

Question

Я играл с этим кодом навсегда. У меня есть липкий навигатор, реализованный на моем сайте, и он должен активироваться, как только заголовок загорается, когда пользователь прокручивается. Заголовок div находится над навигационным div. Липкая часть прекрасно работает, но она активируется слишком рано. Он сразу нажимает вверх, как только я начинаю прокручивать, а затем снова не возвращаюсь в исходное положение после того, как заголовок снова появится.

Вот JQuery, что делает его работу:

(function($) { 

    var $body, 
    $target, 
    targetoffsetTop, 
    resizetimer, 
    stickyclass = 'sticky' 

    function updateCoords() { 
    targetoffsetTop = $target.offset().top 
    } 

    function makesticky() {      //Sets the sticky class to activate once 
    var scrollTop = $(document).scrollTop() //the scroll offset is greater than 
    if (scrollTop >= targetoffsetTop) {  //how far the div is from the top. 
     if (!$body.hasClass(stickyclass)) { 
     $body.addClass(stickyclass) 
     } 
    } else {       
     if ($body.hasClass(stickyclass)) { 
     $body.removeClass(stickyclass) 
     } 
    } 
    } 

    $(window).on('load', function() { 
    $body = $(document.body) 
    $target = $('#header_lg')    //This is the target div that get's sticky 
    updateCoords() 
    $(window).on('scroll', function() { 
     requestAnimationFrame(makesticky) 
    }) 
    $(window).on('resize', function() { 
     clearTimeout(resizetimer) 
     resizetimer = setTimeout(function() { 
     $body.removeClass(stickyclass) 
     updateCoords() 
     makesticky() 
     }, 50) 
    }) 
    }) 

})(jQuery) 

CSS:

#header_lg {   //Before sticky 
    width: 100%; 
    height: 75px; 
    padding: .7%; 
    background-color: blue; 
    -webkit-transition: height 1s, width 1s; 
    -moz-transition: height 1s, width 1s; 
    transition: height 1s, width 1s; 
} 
body.sticky #header_lg { //After sticky 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100px; 
    width: 100%; 
} 

Я довольно новое с JavaScript поэтому любые предложения от вас экспертов, почему код ISN» т права на работу будут весьма признательны. Если это важно, страница находится в формате начальной загрузки, поэтому она находится в классе visible-lg с классом container, который установлен в style="width:100%; margin:0; padding:0;". HTML-код - это просто пустой div с некоторым текстом наполнителя.

Answer 1

вы не правильно писать ваш CSS комментарии (отличается от JS):

try this: (спасибо @Toni за ее ПОЛЕЗНЫЕ пера здесь я раздвоенный, чтобы продемонстрировать)

#header_lg {   /*Before sticky*/ 
    width: 100%; 
    height: 75px; 
    padding: .7%; 
    background-color: blue; 
    -webkit-transition: height 1s, width 1s; 
    -moz-transition: height 1s, width 1s; 
    transition: height 1s, width 1s; 
} 
body.sticky #header_lg { /*After sticky*/ 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100px; 
    width: 100%; 
}