Erstellen eines aktiven dynamischen Menüs mit JQuery

Question

Ich versuche, eine Website mit einem dynamischen Menü zu erstellen, das das aktive Menüelement je nach dem Bildlauf ändert. Ich habe mir andere ähnliche Fragen angesehen und verschiedene Codes getestet, aber ich kann das Problem nicht lösen und sehe nicht, warum es auf meiner Website nicht funktioniert.

Ich habe meinen Code wie dieses Recht jetzt: https://jsfiddle.net/49rcfg0t/

$(document).ready(function() { 
 
    $(document).on("scroll", onScroll); 
 

 
    //smoothscroll 
 
    $('a[href^="#"]').on('click', function (e) { 
 
    e.preventDefault(); 
 
    $(document).off("scroll"); 
 

 
    $('a').each(function() { 
 
     $(this).removeClass('active'); 
 
    }) 
 
    $(this).addClass('active'); 
 

 

 
    }); 
 
}); 
 

 
function onScroll(event){ 
 
    var scrollPos = $(document).scrollTop(); 
 
    $('.topmenu a').each(function() { 
 
    var currLink = $(this); 
 
    var refElement = $(currLink.attr("href")); 
 
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
 
     $('.topmenu a').removeClass("active"); 
 
     currLink.addClass("active"); 
 
    } 
 
    else{ 
 
     currLink.removeClass("active"); 
 
    } 
 
    }); 
 
}

<link rel="stylesheet" type="text/css" href="portfolio2.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<!--Menu superior--> 
 
<nav class="header"> 
 

 
    <div> 
 

 
    <a href="#anchor1" class="topmenu"> 
 
     <img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png"> 
 
     <span id="profile">Menu 1</span> 
 
    </a> 
 

 
    <a href="#anchor2" class="topmenu"> 
 
     <img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png"> 
 
     <span id="exp">Menu 2</span> 
 
    </a> 
 

 
    <a href="#anchor3" class="topmenu"> 
 
     <img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png"> 
 
     <span id="hab">Menu 3</span> 
 
    </a> 
 

 
    <a href="#anchor4" class="topmenu"> 
 
     <img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png"> 
 
     <span id="pro">Menu 4</span> 
 
    </a> 
 

 
    <a href="#anchor5" class="topmenu"> 
 
     <img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png"> 
 
     <span id="contact">Menu 5</span> 
 
    </a> 
 

 
    </div>  
 

 
</nav> 
 

 
<div class="cuerpo"> 
 
    <span class="anchor" id="anchor1"></span> 
 
    <div style="background-color:blue">Area 1</div> 
 

 
    <span class="anchor" id="anchor2"></span> 
 
    <div style="background-color:red">Area 2</div> 
 

 
    <span class="anchor" id="anchor3"></span> 
 
    <div style="background-color:yellow">Area 3</div> 
 

 
    <span class="anchor" id="anchor4"></span> 
 
    <div style="background-color:brown">Area 4</div> 
 

 
    <span class="anchor" id="anchor5"></span> 
 
    <div style="background-color:green">Area 5</div> 
 
</div>

Ich habe folgende Probleme:

1. Wenn ich manuell die Elemente bewegen sind nicht aktiviert.
2. Wenn ich die Links benutze, werden die Elemente aktiviert, aber sie antworten nicht auf die Ankerpetition .
3. Ich möchte auch, wenn ich eines der Elemente des Menüs aktivieren, um das Bild mit einem anderen zu ändern. Ändern Sie beispielsweise die erste Symbol mit dieser:

Vielen Dank im Voraus, dieses Problem macht mich verrückt!

Answer 1

Sie können Ihren Code vereinfachen:

Verwendung mousemove-/MouseEnter- statt Scroll-Ereignis.

Das Snippet:

$(document).ready(function() { 
 
    $('a[href^="#"].topmenu').on('click', function (e) { 
 
    $('a.topmenu').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }); 
 
}); 
 

 
$(document).on('mousemove mouseenter', 'div.cuerpo div', function(event) { 
 
    $('a.topmenu').removeClass('active'); 
 
    $('a[href="#' + this.previousElementSibling.id + '"].topmenu').addClass('active'); 
 
}); 
 

 
$(document).on('keyup', function (e) { 
 
    var charCode = (e.which) ? e.which : e.keyCode; 
 
    if ((charCode >= 49 && charCode <= 53) || (charCode >= 97 && charCode <= 101)) { 
 
    $('a[href="#anchor' + String.fromCharCode(charCode) + '"].topmenu').trigger('click'); 
 
    $(document).scrollTop($('#anchor' + String.fromCharCode(charCode)).offset().top); 
 
    } 
 
});

body{ 
 
    margin:0; 
 
    font-family:'Open Sans', sans-serif; 
 
} 
 

 
div{ 
 
    overflow: auto; 
 
} 
 

 
/*Menu de cabecera*/ 
 

 
.header{ 
 
    margin:auto; 
 
    background-color: white; 
 
    text-align: center; 
 
    position: fixed; 
 
    width:100%; 
 
    padding-top:7px; 
 
    padding-bottom: 7px; 
 
    z-index:5; 
 
    border-bottom:solid 2px #5882FA; 
 
} 
 

 
.header a{ 
 
    text-decoration:none; 
 
} 
 

 
.topmenu img{ 
 
    width:50px; 
 
    height:50px; 
 
    border-radius:90px; 
 
    padding: 2px 2px 2px 2px; 
 
    margin:2px 5px 17px 5px; 
 
} 
 

 
.topmenu img:active{ 
 
    transform: translateY(4px); 
 
} 
 

 
.topmenu img:hover{ 
 
    box-shadow:0px 2px 1px #5882FA; 
 
} 
 

 

 
/*Tooltips*/ 
 

 
.topmenu span{ 
 
    visibility:hidden; 
 
    width: 120px; 
 
    color: white; 
 
    background-color: black; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 2px 0; 
 
    margin:1px; 
 
    font-variant: small-caps; 
 
    text-decoration:none; 
 

 
    /* Position the tooltip */ 
 
    position: absolute; 
 
    top: 70%; 
 
    left: 50%; 
 
    margin-left: -60px; 
 
    opacity: 0; 
 

 
    transition-property: opacity; 
 
    transition-duration: 2s; 
 
} 
 

 
.topmenu:hover span{ 
 
    visibility:visible; 
 
    opacity: 1; 
 
} 
 

 
.active{ 
 
    background-color:black; 
 
} 
 

 
.cuerpo{ 
 
    position: absolute; 
 
    width: 100%; 
 
    margin-top:90px; 
 
} 
 

 
.cuerpo div{ 
 
    height: 590px; 
 
    margin: 5px 15%; 
 
} 
 

 
.anchor{ 
 
    display: block; 
 
    height: 90px; 
 
    margin-top: -90px; 
 
    visibility: hidden; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<nav class="header"> 
 

 
    <div> 
 

 
     <a href="#anchor1" class="topmenu"> 
 
      <img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png"> 
 
      <span id="profile">Menu 1</span> 
 
     </a> 
 

 
     <a href="#anchor2" class="topmenu"> 
 
      <img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png"> 
 
      <span id="exp">Menu 2</span> 
 
     </a> 
 

 
     <a href="#anchor3" class="topmenu"> 
 
      <img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png"> 
 
      <span id="hab">Menu 3</span> 
 
     </a> 
 

 
     <a href="#anchor4" class="topmenu"> 
 
      <img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png"> 
 
      <span id="pro">Menu 4</span> 
 
     </a> 
 

 
     <a href="#anchor5" class="topmenu"> 
 
      <img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png"> 
 
      <span id="contact">Menu 5</span> 
 
     </a> 
 

 
    </div> 
 

 
</nav> 
 

 
<div class="cuerpo"> 
 
    <span class="anchor" id="anchor1"></span> 
 
    <div style="background-color:blue">Area 1</div> 
 

 
    <span class="anchor" id="anchor2"></span> 
 
    <div style="background-color:red">Area 2</div> 
 

 
    <span class="anchor" id="anchor3"></span> 
 
    <div style="background-color:yellow">Area 3</div> 
 

 
    <span class="anchor" id="anchor4"></span> 
 
    <div style="background-color:brown">Area 4</div> 
 

 
    <span class="anchor" id="anchor5"></span> 
 
    <div style="background-color:green">Area 5</div> 
 
</div>