javascript - 向下滚动时如何设置标题固定在屏幕上？

Question

这是演示站点:

http://www.kraphicstudio.com/LLR/index.html

如果向下滚动网站直到横幅消失，您会发现菜单栏

“关于赞助商查询注册捐赠事件”

会停留在屏幕上。

我试过了

#menu {
 position: fixed;
}

但它只能修复元素，而不是固定元素在某些条件下。演示站点中的效果怎么做？非常感谢。

Answer 1

如果你向下滚动菜单比你的菜单固定这样，你现在已经习惯了

var oritop = -100;
$(window).scroll(function() {
    var scrollt = $(this).scrollTop();
    var elm = $(".scrollTopWindow");
    if(oritop < 0) {
        oritop= elm.offset().top;
    }
    if(scrollt >= oritop) {
        elm.css({"position": "fixed", "top": 0, "left": 0,"right":0});
    }
    else {
        elm.css("position", "static");
    }
});

body{height:2000px}
.scrollTopWindow {
    background-color: red;
    height: 40px;
    color: white;
    padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>
<div class = "scrollTopWindow">
    Scroll top window and fix me !
</div>

Source code is