Question

我正在尝试创建一个动态导航栏，该导航栏会在滚动时发生变化，并且在菜单选项出现时无法使导航中的元素保持固定。

请参阅随附的codepen以了解我的意思：http://codepen.io/timothyfernandez/pen/azXQPV

非常感谢任何帮助！

CSS：

body {font-family:sans-serif;}

.socialmedia {margin-left: 80%;}

.socialmedia li {
display: inline;
border:none !important;}

/*Fixed Nav*/
#nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding:30px 0 5px 0;
z-index: 100;
color: white;
background-color: #211f1f;
font-family: sans-serif;}

.inner {
margin-left: 19%; 
float: left;
text-align: justify;
font-size: 120%;}

.inner a {
padding: 0px 63px;}

#nav li {
display: inline;
border-right: 1px solid grey;}

#nav a {
display: inline-block;
color: #FFF;
text-decoration: none;}

/*Nav Transitions*/

.noNav {display: hidden;}

#content {
width: 800px;
height: 700px;
margin-top:100px;
margin-left:auto;
margin-right:auto;}

Answer 1

在此课程中添加position: fixed

<强> SEE DEMO

.inner {
    margin-left: 19%; 
    float: left;
    text-align: justify;
    font-size: 120%;
    colour:red;
    border: solid red 1px;
    position: fixed;
}

.socialmedia {
    margin-left: 84%; //changed to 84%
}

在动态导航栏中修复三个div

1 个答案: