当“固定"时，将菜单保持在最前面.在CSS [英] Keep menu on top when "fixed" in css

问题描述

位于顶部113像素处，位于用户滚动页面时位于顶部.

which is positioned 113px from the top, to be on top when users are scrolling the page.

我知道有一个类似的问题，但是我不确定将js代码放在哪里. (是的，我是新手)

I know there is a similar question, but I am not sure where to put the js code. (Yes I am a newbie)

旧问题: 如何修复"菜单只有在到达顶部时才显示?

如果您想查看示例，请告诉我.

Let me know if you want to see an example.

最诚挚的问候

卡斯滕

推荐答案

以下是如何执行此操作的示例: http://jsfiddle.net/andunai/9x74vkvw/

Here's an example on how to do this: http://jsfiddle.net/andunai/9x74vkvw/

我还将.menu包装到.menu-placeholder div中，以保留菜单位置，以防止页面在更改状态时跳转".

I've also wrapped .menu into a .menu-placeholder div to reserve place for menu prevent page from "jumping" when it changes state.

您的菜单需要2个CSS定义:.static和.fixed.这是CSS示例:

You'll need 2 CSS definitions for your menu: .static and .fixed. Here's the example CSS:

.menu {
    width: 100%;
    margin: 0px 10%;
    display: block;
}

.menu.floating {
    position: fixed;
    top: 0;
    left: 10%;
    width: 10%;
}

这篇关于当“固定"时，将菜单保持在最前面.在CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！