“固定"时将菜单保持在顶部在 CSS 中 [英] Keep menu on top when "fixed" in css

问题描述

距离顶部 113px，当用户滚动页面时位于顶部.

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屋！