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

Question

如何在滚动时将菜单位置设置到页面顶部。好吧，我可以在我的标题上做到这一点。但不是在页面的某个部分.let说我的另一个菜单位于页面的980px高度。如果我尝试使用位置：修复它只会隐藏菜单。即使我使用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

这是一个带有position：sticky的示例的codepen和一个基本的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"});
    }
});

Answer 2

确保没有溢出：隐藏在标题容器

上