javascript - 使用 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>