Почему мой текст закрывается панелью навигации? ⇐ Jquery

[Anonymous]

Я создал заголовок, который имеет липкую панель навигации при прокрутке. Но когда я прокручиваю, мой текст оказывается под ним.


< pre class="snippet-code-js lang-js Prettyprint-override">

Код: Выделить всё

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.fixme').css({
position: 'fixed',
top: '0',
left: '0'
});
} else {
$('.fixme').css({
position: 'static'
});
}
});

Код: Выделить всё

@import url(css/bootstrap.min.css);
@import url(css/font-awesome.min.css);

/*  Min CSS  */

::selection {
background-color: #352e7e;
color: #fff;
}

* {
margin: 0;
padding: 0;
}

body {
background-color: #181818;
color: #dddddd;
font-size: 14px;
}

.container {
padding: 0;
}

.fixme {
width: 100%;
}

.right {
float: right;
margin: 0 34px;
padding: 0 15px;
}

a,
a:hover,
a:focus {
font-size: 16px;
outline: 0 solid transparent;
text-decoration: none;
transition-duration: 500ms;
}

ul,
ol {
margin: 0;
}

ul li,
ol li {
list-style: none;
}

/* Header Area CSS */

.header-area {
position: relative;
width: 100%;
z-index: 1000;
}

.header-area .top-header-area {
border-bottom: 1px solid white;
height: 85px;
padding-right: 70px;
position: relative;
width: 100%;
z-index: 1;
}

.header-area .top-header-area .top-search-area {
position: relative;
z-index: 1;
}

.header-area .top-header-area .top-search-area form {
position: relative;
width: 255px;
z-index: 1;
}

.header-area .top-header-area .top-search-area form input {
background-color: #1a1a1a;
border: none;
border-radius: 10px;
color: #ababab;
font-size: 12px;
font-style: italic;
height: 42px;
padding: 0 20px;
position: relative;
transition-duration: 500ms;
width: 100%;
z-index: 1;
}

.header-area .top-header-area .top-search-area form input:focus {
box-shadow: 0 0 5px 1px rgba(0, 0, 0, .15);
}

.header-area .top-header-area .top-search-area form button {
background-color: transparent;
border: none;
color: #555555;
cursor: pointer;
height: 42px;
position: absolute;
right: 0;
top: 0;
width: 50px;
z-index: 10;
}

.header-area .top-header-area .top-search-area form button:hover,
.header-area .top-heaer-area .top-search-area form button:focus {
box-shadow: none;
color: #20d8da;
}

.header-area .top-header-area .login-area {
position: relative;
z-index: 1;
}

.header-area .top-header-area .login-area a {
border-radius: 10px;
color: #555555;
display: block;
font-size: 14px;
font-weight: 400;
height: 42px;
line-height: 42px;
margin-left: 10px;
text-align: center;
transition: background-color color ease-in-out 400ms;
width: 160px;
}

.header-area .top-header-area .login-area a:hover {
background-color: black;
color: #f06040;
}

.p {
color: green;
padding: 20px 0;
}

/*  NavBar CSS  */

.header-area .fixme #main-navigation {
background-color: #181818e6;
height: 70px;
padding: 20px 110px 0 110px;
width: auto;
}

.header-area .fixme #main-navigation li {
background-color: #181818e6;
position: relative;
}

.header-area .fixme #main-navigation>li {
float: left;
margin-right: 5px;
}

.header-area .fixme #main-navigation li a {
color: #f06040;
display: block;
font-weight: 500;
line-height: 1em;
padding: .5em;
text-decoration: none;
}

.header-area .fixme #main-navigation li a:hover {
color: #20d8da;
}

.header-area .fixme ul.folder-child {
height: 0;
left: 0;
margin-top: 15px;
opacity: 0;
overflow: hidden;
position: absolute;
top: 100%;
transition: all 200ms ease-in-out;
visibility: hidden;
width: 150px;
}

.header-area .fixme #main-navigation li:hover>ul.folder-child {
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
height:  100px;
opacity: 1;
visibility: visible;
}

.hidden-caret {
visibility: hidden;
}

Код: Выделить всё

[*]






Logo Here





[i]
[/i]


[url=#]Login / Register [i][/i][/url]






[list]
[url=#]Fill [i][/i][/url]
[*]
[url=#]In [i][/i][/url]

[url=#]This [i][/i][/url]

[*]
[url=#]Here! [i][/i][/url]
[list]
[url=#]Contact [i][/i][/url]




This is a header that has a search bar, a login/register button, and a sticky dropdown menu. the "sticky" part was easy to make, since it was an empty div with a "fixme" class.  I made it sticky through JavaScript.

blabwerfbvinjerdvs reeruhjb fkjhebfdhvbehjdb uhcjdsb hjdfbvhjdfbvhjdbvcfrcx,hj nedreyireuei iedfkjnc dkfjcn dkjfc dkfjn dkfjn

blabwerfbvinjerdvs reeruhjb fkjhebfdhvbehjdb uhcjdsb hjdfbvhjdfbvhjdbvcfrcx,hj nedreyireuei iedfkjnc dkfjcn dkjfc dkfjn dkfjn

blabwerfbvinjerdvs reeruhjb fkjhebfdhvbehjdb uhcjdsb hjdfbvhjdfbvhjdbvcfrcx,hj nedreyireuei iedfkjnc dkfjcn dkjfc dkfjn dkfjn

blabwerfbvinjerdvs reeruhjb fkjhebfdhvbehjdb uhcjdsb hjdfbvhjdfbvhjdbvcfrcx,hj nedreyireuei iedfkjnc dkfjcn dkjfc dkfjn dkfjn

blabwerfbvinjerdvs reeruhjb fkjhebfdhvbehjdb uhcjdsb hjdfbvhjdfbvhjdbvcfrcx,hj nedreyireuei iedfkjnc dkfjcn dkjfc dkfjn dkfjn

blabwerfbvinjerdvs reeruhjb fkjhebfdhvbehjdb uhcjdsb hjdfbvhjdfbvhjdbvcfrcx,hj nedreyireuei iedfkjnc dkfjcn dkjfc dkfjn dkfjn

blabwerfbvinjerdvs reeruhjb fkjhebfdhvbehjdb uhcjdsb hjdfbvhjdfbvhjdbvcfrcx,hj nedreyireuei iedfkjnc dkfjcn dkjfc dkfjn dkfjn

Когда активирован прикрепленный заголовок, текст подтягивается под него.
Когда я добавляю поля или отступы, они все равно это делают. Это связано с моим JavaScript, но я не знаю где.
Вот моя ручка: https://codepen.io/SynergyOfLife/pen/rPVYQW
Что происходит?

Подробнее здесь: https://stackoverflow.com/questions/543 ... -my-navbar