html - 我想让我的菜单栏随页面滚动

Question

我想让我的菜单栏随页面滚动。有人可以帮我弄这个吗？我不知道该尝试什么，因为我是新来的。我还有一个问题:我想关闭主页的滚动功能。我尝试使用 overflow: hidden 但没有用。

我的 html 代码是:

<center>
<img  src="logo.jpg" alt="logo" width=900 height=500 id="logo"/> 
</center>


<div> <table id="navigatie-venster"> 
    <tr>
        <td> <a href=index.html>Startpagina</a> </td>
    </tr>
    <tr>
        <td> <a href=bestuur.html>Bestuur</a> </td>
    </tr>
    <tr>
        <td> <a href=trainers.html>Trainers</a> </td>
    </tr>
    <tr>
        <td> <a href=disciplines.html>Disciplines</a> </td>
    </tr>
    <tr>
        <td> <a href=waartrainenwij.html>Waar trainen wij</a> </td>
    </tr>
    <tr>
        <td> <a href=uurrooster.html>Uurrooster</a> </td>
    </tr>
    <tr>
        <td> <a href=contact.html>Contact</a> </td>
    </tr>

</table> </div>

<div> <table id="navigatie-vensterr"> 
    <tr>
        <td> <a href=index.html>Startpagina</a> </td>
    </tr>
    <tr>
        <td> <a href=bestuur.html>Bestuur</a> </td>
    </tr>
    <tr>
        <td> <a href=trainers.html>Trainers</a> </td>
    </tr>
    <tr>
        <td> <a href=disciplines.html>Disciplines</a> </td>
    </tr>
    <tr>
        <td> <a href=waartrainenwij.html>Waar trainen wij</a> </td>
    </tr>
    <tr>
        <td> <a href=uurrooster.html>Uurrooster</a> </td>
    </tr>
    <tr>
        <td> <a href=contact.html>Contact</a> </td>
    </tr>

</table> </div>

<div id="facebook">
<a href="https://www.facebook.com/KoninklijkeTurnkringAalst"  target="_blank" > <img  src="facebook.jpg" alt="facebook" width=100 height=100 >  </a> 
</div>

<div id="kwaliteitslabel">
<img  src="kwaliteitslabel.jpg" alt="kwaliteitslabel" width=100 height=100 /> 
</div>

</body>

我的 CSS 是:

body{ background: rgba(169,3,41,1);
background: -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(169,3,41,1)), color-stop(44%, rgba(143,2,34,1)), color-stop(100%, rgba(109,0,25,1)));
background: -webkit-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -o-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: linear-gradient(to right, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019', GradientType=1 );}

#navigatie-venster {position: absolute;
left: 0px; top: 150px; }    

#navigatie-vensterr{ position: absolute;
right: 0px; top: 150px; direction: rtl; }   

Answer 1

老兄在这里检查这段代码

http://jsfiddle.net/naveenkumarpg/bepnus8u/

希望这就是你所期待的

<div id="fixedheader">
    <img src="logo.jpg" alt="logo" width=900 height=500 id="logo" />
</div>

我已经用 div 修改了你的标题并更新了 CSS。

HTML 中也有一些问题，我已经修复了它们。

CSS 在这里:

#fixedheader {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    float:left: display:block;
    text-align:center;
    background:#fff;
}

希望这就是你想要的。

干杯