視差スクロール用のスティッキー ナビゲーション バー/ヘッダー セクションを作成しようとしています。上下にスクロールすると、ナビゲーション/ヘッダーがページの上部に正常に固定されます。ただし、ナビゲーションの [ホーム] タブをクリックすると、粘着性のあるナビゲーション/ヘッダー セクションが secondWrapper div セクションにプルダウンされます。ここで何が欠けていますか?これまでのページへのリンクですhttp://www.jenniferpurwin.com/ThePartyNewYork/parallax-party.html
Javascript:
$('.scroller').on('click', function(e){
e.preventDefault();
var goTo = $(this).attr('data-goto');
var top = $(goTo).position().top - $('#header_container').height();
$("html, body").animate({ scrollTop: top },'slow');
});
var sections = {},
i = 0;
$('.section').each(function(){
var sectionName = $(this).attr('id');
sections[sectionName] = {'bottom': $(this).offset().top + $(this).outerHeight(true), 'top':$(this).offset().top - $('#header_container').height()};
});
$(window).scroll(function(){
var $this = $(this),
pos = $this.scrollTop();
for(i in sections){
if( pos < sections[i].bottom && sections[i].top <= pos){
$('#header_container a').removeClass('active');
$('#nav_' + i).addClass('active');
}
}
});
$(document).ready(function() {
var stickyNavTop = $('#header_container').offset().top;
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#header_container').addClass('sticky');
} else {
$('#header_container').removeClass('sticky');
}};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
})