上面的链接是我的响应式设计布局,单页固定菜单。
我想让菜单标记在固定菜单中滑动。例如,首先我点击了第2部分菜单按钮。菜单标志将突出显示第2部分。其次,当我使用鼠标滚动到第1部分时,菜单标志可以自动从第2部分移动到第1部分。我该怎么做?
js code
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;
}
答案 0 :(得分:0)
您可以为scroll
事件添加处理程序,以检查当前滚动位置并突出显示相应的菜单部分。
function menuHighlight() {
/* compare your content offset top width $(document).scrollTop()
and highlight needed section of menu */
}
$(window).on('scroll', menuHighlight);
此外,您还需要为resize事件处理程序添加此检查
$(window).on('resize', menuHighlight);
之后你可以删除旧的菜单突出显示方法,它现在会自动突出显示。
我希望我能正确理解你的问题,它可以帮助你。