javascript - Detecting if element is hovering on section -

have side dot navigation on website - standard position: fixed dot nav. have 2 types of sections 2 types of background on same website - lets assume 1 white , black. problem when dots not visible when navigation hovering black section. tried write script detects if section have class , if dot on section - if yes color of dot changed. had success after finish realise script works in 1 way ( scrolling top bottom ) , if detect bottom top scrolling not work when change direction in middle of website. arleady spend on quite while , im clueless - here code have far - working when scroll top bottom.

do have other suggestion or perhaps library solve issue ?

edit: layout quite artistic - there boxes floats left or right dynamicly , dots have change when box there, why splice array , push #myname it.

edit2: can see how works under link ( not optimized, slow load time http://lektor.ionstudio.pl/)

var sections = []; $("section[id]").each(function() {     sections.push("#" + this.id); }) sections.splice(0,0,"#myname"); = 0;   $(window).scroll(function(){     var content = $("section.current").hasclass("white-section");     $("#banner .navigation li").each(function(){         var thiselem = this.getboundingclientrect();            section = sections[i];          section = document.queryselector(section);         sectionrect = section.getboundingclientrect();            if(sectionrect.top - thiselem.top <= 0) {             if($(section).hasclass("white")) {                 $(this).addclass("black");             } else {                 $(this).removeclass("black");             }             if(sectionrect.top + $(section).outerheight(true) <= thiselem.top ) {                 i++;             }         }       }) }) 

as mentioned in comments use elementfrompoint check if dot on section specific class.

try this:

(function(win, doc) {    var dotsselector = '.dot';    var sectionsselector = 'section';    var classes = ['white', 'black'];    var dots = [].slice.call(doc.queryselectorall(dotsselector));    var dotpositions = dots.map(function(dot) {      var rect = dot.getboundingclientrect();      return rect.top + rect.height / 2 ;                             });    var sections = [].slice.call(doc.queryselectorall(sectionsselector));           win.addeventlistener('scroll', function(event) {      for(var = 0; < dots.length; ++i) {        var element = doc.elementfrompoint(0, dotpositions[i]);        var section = null;        while(!section && element) {          section = sections.find(function(s) { return s === element });          element = element.parentnode;         }        if(section) {          dots[i].classlist.toggle(classes[0], section.classlist.contains(classes[1]));        }      }    });  })(window, document);

section {    min-height: 400px;    background: white;  }    section.black {    background: black;  }    .menu {    position: fixed;    top: 50%;    transform: translatey(-50%);    left: 10px;    z-index: 20;  }    .dot {    border-radius: 50%;    width: 20px;    height: 20px;    background: black;    margin-bottom: 10px;  }    .dot.white {    background: white;  }    * {    padding: 0;    margin: 0;  }    ul {    list-style: none;  }

<section></section>  <section class="black"></section>  <section></section>  <section class="black"></section>  <section></section>  <section class="black"></section>    <ul class="menu">    <li class="dot"></li>    <li class="dot"></li>    <li class="dot"></li>    <li class="dot"></li>    <li class="dot"></li>    <li class="dot"></li>  </ul>

wiki