Navigation overlaps main text

Problem:

Left hand navigation moves and overlaps main text when scrolling down the page

/www/sites/all/themes/corp_base/assets/js/site/modules/event-listeners/stickables/helpers.js

this file contains an extremely large object which is focusing on the following classes: 'header-wrapper'( HEADER WRAPPER), 'accordion__title' (ACCORDION SHOWHIDE), 'horizontal-slider' (HORIZONTAL SLIDER) and 'list-highlight' (LIST HIGHLIGHT) . The classes are the 'stick-able objects /items'. which contain three functions? for each.

They all have three actions:

• decideAction
• stick
• unstick

there is a key that label's the components of the element . In order to fix this problem I must make sure that once the nav bar scroll to a certain point, the width of the nav doesn't extend.

The styling can be edited in this file:

www/sites/all/themes/corp_base/assets/css/site/includes/_include-list-highlight.scss

Identify areas to learn:

• JavaScript Coordinates coordinates
• HTMLCollection html collections
• Javascript Objects
• if/ conditional statements
• jQuery scrollTop / method & API jQuery docs
• window.addEventListener('scroll', function)...
• Programming logic

Learn/ Practice:

jQuery(document).ready(function() {
var navOffset = jQuery("nav").offset().top;
//this variable keeps track of where the scrolling bar sits - top offset how far in pixels from the top of the 
page does the navigation bar sit

jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
//this will return how far we've scrolled down from the top of the page 
jQuery(".status").html (scrollPos);

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

} else {
jQuery ("nav").removeClass ("fixed");
}
});

Implement: