Bootstrap - 固定菜单栏，带有可滚动内容

Question

我找到了以下网页：https://www.baronfunds.com/product-detail?fund=bdfix。当您向下滚动时，该项目包含OVERVIEW，PRICES＆amp;性能等在内容可滚动的情况下保持不变。我想做类似的事情。

我目前有：

我想在＆＃34;市场价值＆＃34;的行下面添加一个类似的栏。

我尝试使用以下html和css，并得到了这个：

我希望顶部菜单栏和新菜单栏上方的标题部分在滚动时保持不变。但是在这里，标题部分也会滚动。也就是说，我希望固定顶部菜单中的每一个都能在菜单下滚动，而菜单栏上方的所有内容都保持不变。

怎么做？

html：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            @Html.Partial("_company")
        </div>
    </div>
</div>
<div class="navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
</div>
<div class="main">
    <h1>Fixed Top Menu</h1>
    <h2>Scroll this page to see the effect</h2>
    <h2>The navigation bar will stay at the top of the page while scrolling</h2>

    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
</div>

css：

.navbar {
         overflow: hidden;
background-color: #333;
position: fixed;
top: 50;
width: 100%;
}

.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.main { padding: 16px; margin-top: 30px; height: 1500px; /* Used in this example to enable scrolling */ }