Element beim Scrollen fixieren ⇐ Jquery

[Guest]

Ich versuche, dafür zu sorgen, dass die Navigationsleiste oben bleibt, wenn der Benutzer nach unten zur Navigationsleiste scrollt, und sie dann aufzuheben, wenn der Benutzer über die Navigationsleiste hinaus wieder nach oben scrollt. Ich verstehe, dass dies nur über JavaScript implementiert werden kann. Ich bin ein JavaScript-Anfänger, also je einfacher, desto besser. Das JSFIDDLE ist da.

Der HTML-Code lautet wie folgt:

Code: Select all

   





[img]#[/img]


[url=#]HELLO GUYS[/url]


 WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON.  

Das CSS lautet wie folgt:

Code: Select all

      .main{text-align:center;}

h1{
-webkit-font-smoothing: antialiased;
display:inline-block;
font: 800 1.313em "proxima-nova",sans-serif;
padding: 10px 10px;
margin: 20px 20px;
letter-spacing: 8px;
text-transform: uppercase;
font-size:3.125em;
text-align: center;
max-width: 606px;
line-height: 1.45em;
position: scroll;
background-color:#e94f78;
text-decoration: none;
color:yellow;
background-image:url;
}

h1 a{
text-decoration: none;
color:yellow;
padding-left: 0.15em;
}

h2{
-webkit-font-smoothing: antialiased;
display:inline-block;
font: 800 1.313em "proxima-nova",sans-serif;
letter-spacing: 8px;
margin-top: 100px;
text-transform: uppercase;
font-size:3.125em;
text-align: center;
line-height: 1.45em;
position: scroll;
text-decoration: none;
color:white;
z-index: -9999;
}

h2 a{
text-decoration: none;
color:white;
padding-left: 0.15em;
}

h5{

position: absolute;
font-family:sans-serif;
font-weight:bold;
font-size:40px;
text-align: center;
float: right;
background-color:#fff;
margin-top: -80px;
margin-left: 280px;
}

h5 a{

text-decoration: none;
color:red;
}

h5 a:hover{

color:yellow;
}

#text1{
-webkit-font-smoothing: antialiased;
display:inline-block;
font: 800 1.313em "proxima-nova",sans-serif;
margin: 20px 20px;
letter-spacing: 8px;
text-transform: uppercase;
font-size:3.125em;
text-align: center;
max-width: 606px;
line-height: 1.45em;
position: scroll;
background-color:#E94F78;

}

#text1 a{
color:yellow;
text-decoration: none;
padding-left: 0.15em;

}

#text1 a:hover{

text-decoration: none;
cursor:pointer;
}

.whiteboard{
background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg);
background-position: center;
padding: ;
background-color: #fff;
z-index: 1000;
}

.bg{
height:2000px;
background-color:#ff0;
background-image:url(http://alwayscreative.net/images/stars-last.jpg);
position:relative;
z-index: -9999;

}
.bg1{
background-image:url(http://alwayscreative.net/images/stars-last.jpg);
z-index: -9999;
height:1000px;
}
/* Header */
#wrap {
margin: 0 auto;
padding: 0;
width: 100%;
}

#featured {
background: #E94F78 url(http://www.creativityfluid.com/wp-content/themes/creativityfluid/images/img-bubbles-red.png) no-repeat top;
background-size: 385px 465px;
color: #fff;
height: 535px;
overflow: hidden;
position: relative;
z-index: -2;
}

#featured .wrap {
overflow: hidden;
clear: both;
padding: 70px 0 30px;
position: fixed;
z-index: -1;
width: 100%;
}

#featured .wrap .widget {
width: 80%;
max-width: 1040px;
margin: 0 auto;
}

#featured h1,
#featured h3,
#featured p {
color: yellow;
text-shadow: none;
}

#featured h4{
color:white;
text-shadow:none;
}

#featured h4 {
margin: 0 0 30px;
}

#featured h3 {
font-family: 'proxima-nova-sc-osf', arial, serif;
font-weight: 600;
letter-spacing: 3px;
}

#featured h1 {
margin: 0;
}

.textwidget{
padding: 0;
}

.cup{
margin-top:210px;
z-index: 999999;
}

.container{font-size:14px; margin:0 auto; width:960px}
.test_content{margin:10px 0;}
.scroller_anchor{height:0px; margin:0; padding:0;background-image:url()}
.scroller{background:#FFF;
background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg);
margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}