Проблема с прокруткой jQuery

Question

Итак, я создаю сайт для друга, и я хочу, чтобы он прокручивал href-щелчки, что было легко, мне удалось сделать это с плавной анимацией. Но проблема в том, что, когда я загружаю страницу и нажимаю ссылку FIRST, прокрутка не является точной, и после того, как я нажму на что-либо после нажатия Test1, она снова не будет точной. Так как мне сложно объяснить, так что вы можете проверить его.

$(document).ready(function() { 

$('.click').click(function(e){ 
    // prevent default action 
    e.preventDefault(); 

    scrollToElement($(this).attr('href'), 1000); 
}); 

    var scrollToElement = function(el, ms){ 
    var speed = (ms) ? ms : 600; 
    $('html,body').animate({ 
     scrollTop: $(el).offset().top-102 
    }, speed); 
} 

}); 

Полный код здесь: http://jsfiddle.net/pxmfs78k/

Как проверить мою проблему:

Нажмите любую ссылку в первый раз, и тогда вы увидите, что DIV не позиционируется, где я хотел, чтобы это было, и если вы снова нажмете ту же ссылку, она будет правильно позиционировать, и после этого нет проблем при нажатии, пока вы не перезагрузите или не нажмете ссылку test1, первую.

Значит, любая идея, что может вызвать проблему?

И я прочитал эту https://stackoverflow.com/questions/19750702/jquery-scrolling-issues-with-scrolltop нить, и я не мог исправить свою проблему с объяснениями, приведенными там.

Answer 1

Это потому, что вы устанавливаете навигацию на липкую, таким образом, удаляя ее из потока, и весь контент вскакивает на 102px, чтобы исправить это, дать липкий класс телу вместо навигатора и использовать прописку бороться с ним. http://jsfiddle.net/pxmfs78k/1/

CSS

body.sticky { 
    padding-top: 102px; 
} 
body.sticky .nav { 
    position: fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 100; 
    border-top: 0; 
} 

JS

$(document).ready(function() { 
    var stickyNavTop = $('.nav').offset().top; 

    var stickyNav = function() { 
     var scrollTop = $(window).scrollTop(); 

     if (scrollTop > stickyNavTop) { 
      $('body').addClass('sticky'); 

     } else { 
      $('body').removeClass('sticky'); 
     } 
    }; 

    stickyNav(); 

    $(window).scroll(function() { 
     stickyNav(); 
    }); 
}); 



$(document).ready(function() { 

    $('.click').click(function (e) { 
     // prevent default action 
     e.preventDefault(); 

     scrollToElement($(this).attr('href'), 1000); 
    }); 

    var scrollToElement = function (el, ms) { 
     var speed = (ms) ? ms : 600; 
     $('html,body').animate({ 
      scrollTop: $(el).offset().top - 102 
     }, speed); 
    } 

});