Sticky Navigation - Beginner

Question

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

Jquery:

jQuery(document).ready(function() { 

// define variables 
var navOffset, scrollPos = 0; 

// add utility wrapper elements for positioning 
jQuery("nav").wrap('<div class="nav-placeholder"></div>'); 
jQuery("nav").wrapInner('<div class="nav-inner"></div>'); 
jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>'); 

// function to run on page load and window resize 
function stickyUtility() { 

    // only update navOffset if it is not currently using fixed position 
    if (!jQuery("nav").hasClass("fixed")) { 
     navOffset = jQuery("nav").offset().top; 
    } 

    // apply matching height to nav wrapper div to avoid awkward content jumps 
    jQuery(".nav-placeholder").height(jQuery("nav").outerHeight()); 

} // end stickyUtility function 

// run on page load 
stickyUtility(); 

// run on window resize 
jQuery(window).resize(function() { 
    stickyUtility(); 
}); 

// run on scroll event 
jQuery(window).scroll(function() { 

    scrollPos = jQuery(window).scrollTop(); 

    if (scrollPos >= navOffset) { 
     jQuery("nav").addClass("fixed"); 
    } else { 
     jQuery("nav").removeClass("fixed"); 
    } 

}); 

});

---

Html: http://pastebin.com/MSfbQxdv CSS: http://pastebin.com/v0VrGf3T

Answer 1

Если все, что вы хотите, чтобы ваш заголовок "липкий", то вы можете просто использовать этот CSS вместо JavaScript:

#navMenu { 
     position: fixed; 
     top: 0; 
     height: 200px;  // 200px is just an example 
} 

#main { 
     margin-top: 200px; // Same as #navMenu height, so the top portion of the content stays below #navMenu 
}