Highlighting

Highlighting DOM elements on scrolling

Usage

var mapHighlighting = new MapHighlight()
mapHighlighting.start();

If new element was added to DOM or removed, this.sectionsPositions should be updated, so:

mapHighlighting.start(); //works as update

Commands

Get Sections

Select and make array with sections (map) inside main element selector (by default is body>container)_

mapHighlighting.getSections();
this.sectionsMap = [
  "map_applicant1", 
  "map_applicant1_info", 
  "map_applicant1_contact",
  ...
];

Get Sections Positions

Make array with sections positions ([offset from top]:[element id])

mapHighlighting.makeSectionsPosition();
this.sectionsPositions = {
  417: "applicant1", 
  446: "applicant1_info", 
  866: "applicant1_contact", 
  ... 
};

Choose Element which should be highlight

Check Array With Section`s positions and choose one which should be highlight

mapHighlighting.check();
sectionsYCoordinate = [446, 866, 1062, 1091, 1384, 1445, 1485, 1745]; //DOM elements cordinates

Highlight the element

Adding or removing class from element which should be highlight

mapHighlighting.highlite();