当我向上和向下滚动页面时，使菜单标志在固定菜单中滑动答案

【问题标题】：Make menu flags slide in a fixed menu while I scroll up & down a page当我向上和向下滚动页面时，使菜单标志在固定菜单中滑动
【发布时间】：2015-06-03 09:08:22
【问题描述】：

my demo

以上链接是我的响应式设计布局，带有单页固定菜单。

我想让菜单标志在固定菜单中滑动。例如，起初我单击第 2 节菜单按钮。菜单标志将突出显示第 2 部分。其次，当我使用鼠标向上滚动到第 1 部分时，菜单标志可以自动从第 2 部分移动到第 1 部分。我该怎么做？

js代码

var menuContainer = $('header').height();

function scrollToAnchor(anchorName) {
  var aTag = $("div[name='" + anchorName + "']");
  $('html,body').animate({
    scrollTop: aTag.offset().top - menuContainer
  }, 'slow');
  console.log(anchorName);
}
$(window).on('resize', function(event) {
   menuContainer = $('header').height();
});

css代码

/* header - navigation */
#subnav {
    height: 100%;
    margin-right: auto;
    width: 100%;
    background-color: #FFFFFF;
    font-size: 120%;

}
#submenu ul {
    padding: 0;
    margin-top: 4px;
    margin-right: auto;
    margin-left: 0%;
    margin-bottom: 0;
    width: 650px;
}
#submenu li {
    float: left;
}
#submenu li a {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #294C52;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.submenu-active {
    background-color: #294C52;
    color: #FFFFFF; 
}
a {
  color: #294C52;
}

【问题讨论】：

标签： jquery html css menu

【解决方案1】：

您可以为scroll 事件添加处理程序以检查当前滚动位置并突出显示相应的菜单部分。

function menuHighlight() {
    /* compare your content offset top width $(document).scrollTop() 
       and highlight needed section of menu */
}
$(window).on('scroll', menuHighlight);

您还需要为调整大小事件处理程序添加此检查

$(window).on('resize', menuHighlight);

之后你可以删除旧的菜单高亮方法，现在它会自动高亮。

我希望我正确理解了您的问题，它可以帮助您。

【讨论】：