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.

Identify areas to learn:

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

Learn/ Practice:

Implement: