html - 固定菜单在页面的某个部分

Question

如何在滚动时将菜单位置置于页面顶部。好吧，我可以在我的标题上做到这一点。但不在页面的某个部分。假设我的其他菜单位于页面的 980 像素高度上。如果我尝试使用 position:fixed 它只会隐藏菜单。即使我使用 z-index。这是视觉效果:

+________________________+ | HEADER MENU <--- Fixed menu - stays at top even when scrolling. +¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+ | CONTENT BEGINS | | HERE | | | | OTHER MENU | <---- This must stay on the top when i hit this menu | | and stay while scrolling | | | | | | | | +¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+

Answer 1

这是一个带有位置示例的codepen:sticky和一个基本的jquery示例。请记住，存在一些支持问题，但此时您基本上没问题。但是，如果您决定使用粘性，则需要考虑一下。 https://codepen.io/anon/pen/WZGxrm?editors=1111 (删除注释语法以显示一个选项或另一个)

#otherMenu {
  position: sticky;
  top: 50px;
}

添加 50 以说明标题的高度:

var menu_position = $("#otherMenu").offset().top; 

$(window).on('scroll', function() {
    if (($(document).scrollTop() + 50) >= menu_position){
$("#otherMenu").css({"position":"fixed", "top":"50px"});
    } else {   $("#otherMenu").css({"position":"static", "top":"auto"});
    }
});