Создание активного динамического меню с помощью JQuery

Question

Я пытаюсь создать веб-сайт с динамическим меню, которое изменяет элемент активного меню в зависимости от прокрутки. Я смотрел на другие вопросы, подобные этому, и пробовал другой код, но я не могу решить проблему и не могу понять, почему она не работает на моем сайте.

У меня есть код, как это прямо сейчас: 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>

У меня есть следующие проблемы:

1. Когда я прокручивать вручную элементы не включаются.
2. Когда я использую ссылки, элементы активируются, но они не ответ на якорь.
3. Я также хотел бы, когда я активирую один из элементов меню , чтобы изменить изображение с другим. Например, изменить первый значок с этим:

Спасибо заранее, эта проблема сводит меня с ума!

Answer 1

Вы можете упростить код:

использование MouseMove/MouseEnter вместо события прокрутки.

Сниппет:

$(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>