当css中“固定”时,将菜单保持在顶部

时间:2014-12-04 12:31:54

标签: javascript css menu fixed

位于顶部113px,当用户滚动页面时位于顶部。

我知道有一个类似的问题,但我不知道在哪里放js代码。 (是的,我是新手)

老问题: How to "fixed" menu only when it get to the top?

如果您想看一个例子,请告诉我。

祝你好运

的Carsten

3 个答案:

答案 0 :(得分:2)

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

我还将.menu包装到.menu-placeholder div中以保留菜单,以防止页面在状态发生变化时“跳跃”。

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

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

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

答案 1 :(得分:1)

您只需使用JS即可:

#idOftheDiv 
{
    position:fixed;
    top:113px;
}
在你的CSS中

答案 2 :(得分:1)

好吧,你可以把代码放在页头中,如: -

<html>
<head>
<script>
$(document).ready({
$(window).on('scroll', function(){
    // instead of 113 use the scrollTop when the element touches the top of the window
    if($(window).scrollTop()>=113){
        $(element).css('position', 'fixed');
    }
    else $(element).css('position', 'relative');
});
});
</head>
<body>
// your stuff goes there.
</body>
</html>