Сделать элемент фиксированным при прокрутке ⇐ CSS

[Anonymous]

Я пытаюсь сделать навигационную панель прилипать к вершине, когда пользователь прокручивается вниз к панели навигации, а затем отрекаюсь, когда пользователь прокручивается обратно после Navbar. Я понимаю, что это может быть реализовано только через JavaScript. Я новичок в JavaScript, так что чем легче, тем лучше. JSfiddle здесь. < /p>

HTML выглядит следующим образом: < /p>










HELLO GUYS


WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON.


CSS выглядит следующим образом:

.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();
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-conte ... es-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();
margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}


Подробнее здесь: https://stackoverflow.com/questions/154 ... -on-scroll