Javascript 粘性菜单帮助_Javascript_Css

Javascript 粘性菜单帮助

javascript css

Javascript 粘性菜单帮助,javascript,css,Javascript,Css,我需要帮助创建一个粘性菜单（附加在滚动）我需要它附加时，我向下滚动到页面的结尾我相信我在这里需要脚本方面的帮助代码如下： <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-decora

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

我需要它附加时，我向下滚动到页面的结尾

我相信我在这里需要脚本方面的帮助

代码如下：

<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>


@导入url（'http://fonts.googleapis.com/css?family=Oswald');
@导入url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
身体{
文字装饰：无；
背景#6969；
宽度：100%；
最小高度：100%；
填充：0；
保证金：0；
-webkit字体平滑：抗锯齿；
}
标题{
最大宽度：100%；
高度：140像素；
背景图像：url（“”）；
文本对齐：居中；
填充：75px0；
}
收割台h1{
颜色：#ffffff；
字体大小：4.5em；
字体系列：“Raleway”，无衬线；
字号：100；
}
收割台h3{
颜色：#fff；
字号：1.5em；
字体系列：“奥斯瓦尔德”，无衬线；
文本转换：大写；
填充：10px；
}
保险商实验室{
列表样式类型：无；
填充：0px；
边际：0px；
}
导航ul{
文字装饰：无；
文本对齐：居中；
溢出：隐藏；
浮动：中心；
宽度：100%；
填充：0；
利润率：0；
列表样式：无；
背景#EBEEF5；
字体系列：“奥斯瓦尔德”，无衬线；
-webkit盒阴影：1px 1px 0px rgba（204、204、204、0.55）；
-moz盒阴影：1px1px1px0pxRGBA（2042042040.55）；
盒影：1px1px1px0pxRGBA（2042042040.55）；
}
李国荣{
浮动：左；
}
导航ula{
显示：块；
填充：25px；
字体大小：20px；
文本转换：大写；
颜色：#8A8E99；
文字装饰：无；
-webkit过渡：0.5s易用性；
-moz转换：0.5s易用性；
过渡：0.5s缓解；
}
导航：悬停{
文字装饰：无；
背景#66B2FF；
颜色：#fff；
}
导航电流{
背景#66B2FF；
颜色：#fff；
显示：块；
填充：25px；
字体大小：20px；
浮动：对；
宽度：100px；
文本对齐：居中；
}
.content.post{
左边框：5px实心#3d3d；
填充：0 15px；
边缘底部：50px；
正文{背景：url（数据：image/png；base64，ivborw0kggoaaaansuhueugaaaaaaaaaafcayaaacnbyblaaaakeleqvqiw2nkqanoiv2bgzhfqal75pf5wgvhaibfyegyafwlsgyagcqtrfgad9q4qaaabjru5erkjggg==）#bcc；
a:链接{
颜色：#3d3d；
背景色：；
文字装饰：无显示；
} 
.input text.tl、.input text.tr、.input text.bl、.input textarea.tl、.input textarea.tr、.input textarea.bl、.input textarea.br、.input textarea.br、.element\U tl、.element\U avatar.image{
背景：无；
}
.element_化身img{
填充：2px；
边框：1px灰色实心；
边界半径：100%；
过渡时间：300ms；
}
.element_头像img：悬停{
变换：旋转（90度）比例（0.8）；
}






雷区

以下是现场菜单：

亲切问候,， Jleeto

试试这个

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

如果你想在向下滚动时将其附加到页面顶部，你需要使用js，否则你可以使用

position:fixed；

请阅读好的，那么我需要js方面的帮助。有人有什么想法吗？