Question

我需要帮助创建一个粘性菜单（在滚动时附加）。

当我向下滚动到页面末尾时，我需要它附加！

我相信我在这里需要帮助。

以下是代码：

<style>
@import url('http://fonts.googleapis.com/css?family=Oswald');
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

body {
  text-decoration: none;
  background: #696969;
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

header {
  max-width: 100%;
  height: 140px;
  background-image: url('');
  text-align: center;
  padding: 75px 0;
}
header h1 {
  color: #ffffff;
  font-size: 4.5em;
  font-family: "Raleway", sans-serif;
  font-weight: 100;
}
header h3 {
  color: #fff;
  font-size: 1.5em;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  padding: 10px;
}

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

nav ul {
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  float: center;
  width: 100%;
  padding: 0;
  margin: 0 0 0;
  list-style: none;
  background: #EBEEF5;
  font-family: "Oswald", sans-serif;
  -webkit-box-shadow: 1px 1px 1px 0px rgba(204, 204, 204, 0.55);
  -moz-box-shadow: 1px 1px 1px 0px rgba(204, 204, 204, 0.55);
  box-shadow: 1px 1px 1px 0px rgba(204, 204, 204, 0.55);
}
nav ul li {
  float: left;

}
nav ul a {
  display: block;
  padding: 25px;
  font-size: 20px;
  text-transform: uppercase;
  color: #8A8E99;
  text-decoration: none;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  transition: 0.5s ease;
}
nav ul a:hover {
  text-decoration: none;
  background: #66B2FF;
  color: #fff;
}
nav ul .current {
  background: #66B2FF;
  color: #fff;
  display: block;
  padding: 25px;
  font-size: 20px;
  float: right;
  width: 100px;
  text-align: center;
}
.content .post {
  border-left: 5px solid #3D3D3D;
  padding: 0 15px;
  margin-bottom: 50px;

body { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQANOiV2bGZHFQAL75pf5wgVhAiBFYEGYAFwlsgqYAgCqtRfGAd9q4QAAAABJRU5ErkJggg==) #bcc;

a:link { 
color: #3D3D3D; 
background-color: ; 
text-decoration: no display; 
} 

.input-text .tl, .input-text .tr, .input-text .bl, .input-text .br, .input-textarea .tl, .input-textarea .tr, .input-textarea .bl, .input-textarea .br, .element_avatar.image .a_tl, .element_avatar.image .a_tr, .element_avatar.image .a_bl, .element_avatar.image .a_br{
  background:none;
}
.element_avatar img {
  padding: 2px;
  border: 1px grey solid;
  border-radius: 100%;
  transition: 300ms;
}
.element_avatar img:hover {
  transform: rotate(90deg) scale(0.8);
}
</style>


    <body>
        <!-- Header -->
        <header>
        </header>
        <!-- Navigation -->
        <nav>
            <ul>
                <li><a href="/#" class="menu">Home</a></li>
                <li><a href="/#" class="menu">Forum</a></li>
                <li><a href="/#" class="menu">Store</a></li>
                       <li><a href="/#" class="menu">Vote</a></li>
                        <li><a href="/#" class="menu">Staff</a></li>
                <li class="current"><span id="location">Minelands</span></li>
            </ul>
        </nav>

这是实时菜单：

http://www.minelandsmc.enjin.com

亲切的问候， Jleeto

Answer 1

试试这个。，

   nav {
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 111;
    }

粘性菜单帮助

1 个答案: