Creating an active dynamic Menu with JQuery

Question

I am trying to create a website with a dynamic menu which changes the active menu element depending on the scrolling. I was looking at other questions similar to this one, and trying different code, but I can not resolve the problem and can not see why it is not working in my site.

I have my code like that right now: 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");
    }
  });
}

I have the following problems:

When I scroll manually the elements are not activated.
When I use the links the elements are activated but they do not answer to the anchor petition.
I also I would like, when I activate one of the elements of the menu, to change the image with another one. For example, change the first icon with this one:

Thank you in advance, this problem is driving me crazy!

gaetanoM · Accepted Answer

You may simplify your code:

use mousemove/mouseenter instead of scroll event.

The 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;
}

Creating an active dynamic Menu with JQuery

Answers (1)

Related Questions