Question

当我向下滚动页面时，我正试图让我的徽标和manu栏跟随我的页面，

目前这就是我所拥有的。

CSS是;

html,body {
background-image:url(../img/background.png);
background-size:cover;
background:fixed;
}


#bar {  
margin-top:55px;
width: 1920px center;
height: 30px;
background: #2E2E2E;
border: 3.2px groove #FFD700;  
}
#logo { 
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
#middle
{
height:10000px;
}

和HTML：

</head>
<body>
<div id="logo">
</div>
<div id="bar">
</div>
<div id="middle">
</div>
</body>
</html>

所以，我需要改变什么来使'bar'和'logo'跟随我的卷轴。

谢谢你的帮助

Answer 1

这是一个jsfiddle，我将如何做...

http://jsfiddle.net/2Zqhw/

我已将这两个元素包装在div中，并将其position:fixed和width:100%

Answer 2

您可以尝试在另一个div中嵌套徽标和栏，然后在封闭的div上设置position:fixed，以便您的HTML看起来像：

<div id="fixed_bar" style="position:fixed;">
  <div id="logo"/>
  <div id="bar"/>
</div>
<div id="middle">
</div>

或者你可以像上面那样添加封闭的div，但是在CSS中定义它的样式：

#fixed_bar
{
  position:fixed;
}

使用HTML：

<div id="fixed_bar">
  <div id="logo"/>
  <div id="bar"/>
</div>
<div id="middle">
</div>

Answer 3

您需要一个div来包装您的徽标和栏，并使用CSS将位置设置为固定。

CSS：

#nav-fixed {
    position:fixed;
}

HTML：

<div id="nav-fixed">

    <div id="logo">
    </div>

    <div id="bar">
    </div>

</div>

滚动时，使菜单栏和徽标跟随网页

3 个答案: