滚动浏览时，Navbar贴到屏幕顶部 [英] Navbar stick to top of screen when scrolling past

问题描述

我在做一个网站，在那里我想要导航栏的位置改为固定，当我滚动过去。

I am making a website, where I want the navbar to change its position to 'fixed' when I scroll past it.

但有一个问题。当我改变其位置值时，设计完全混乱。请参阅www.rowweb.dk/skyline/ - 我正在使用Bootstrap。

There is a problem though. The design completely messes up when I change its position value. See www.rowweb.dk/skyline/ - I'm using Bootstrap by the way.

到目前为止，我有以下代码块：

I have the following block of code so far:

$(window).scroll(function () {
    winHeight = $(window).height();
    if ($(window).scrollTop() > winHeight) {
        $('.navbar').css('position', 'fixed');
        $('.navbar').css('top', '0');
    }
});

有没有人解决我的问题？

Does anyone have a solution to my problem?

推荐答案

A。 Wolff是对的。

A. Wolff is right.

'＃mainContent'在.navbar内，因此它们都固定在顶部，并覆盖.jumbotron元素，

'#mainContent' is inside .navbar, and so they are both fixed to the top, and overlay the .jumbotron element, as well as not being scrollable.

将它移到.navbar外面，您应该就可以了。

Move it outside .navbar and you should be ok.

这篇关于滚动浏览时，Navbar贴到屏幕顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！