Не могу закрепить панель навигации

Амир Эргашев

Всем доброго времени суток.

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

Задачей было: фиксировать панель на верху при прокрутке страницы на определенное количество пикселей. Однако, ничего не происходит.

Вот мой код:
html

<head>
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script src="js/navigation.js"></script>
        <link rel="icon" href="img/favicon.png" type="image/x-icon">
</head>

<body>
            <div id="logo">
                    <a href="index.html"><img src="img/logo1.png" alt="LOGO"></a>
            </div>

<nav>
        <ul class="main-nav">
                <li class="current"><a href="index.html">Home</a></li>
                <li><a href="Pages/About.html">About</a></li>
                <li><a href="">Product</a></li>
                <li><a href="">Service</a></li>
                <li><a href="Pages/Portfolio.html">Portfolio</a></li>
                <li><a href="Pages/Contact.html">Contact</a></li>
        </ul>
</nav>

css
```
body {
margin: 0;
padding-top: 250px;
height: 100%;
width: 100%;
background-color: white;
font: 15px 'Verdana';
}

logo {
width:100%;
text-align: center;
height: 256px;
}

nav{
text-align: center;
background-color:#353E47;
position: relative;
z-index: 150;
box-shadow: 0 4px 6px rgba(0,0,0, .4)
}

nav ul {
list-style-type: none;
margin-left: 29%;
padding: 0;
overflow: hidden;
background-color: #353E47;
}

nav ul li {
float: left;
width: 10%;
text-align: center;
margin: 0;
padding: 0;
}

nav ul li a {
display: block;
color: white;
text-align: center;
padding: 15px 15px;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
font-size: 1.0vw;
}

nav ul li a:hover{
background-color: #FFFFFD;
color: black;
text-decoration: none;
}

.nav-scrolled, #logo{

position: fixed;
top: 0;
width: 100%;
}
```

js

$(window).scroll(function() {
if( $(this).scrollTop() > 256) {
nav.addClass(".nav-scrolled")
}
else {
nav.removeClass(".nav-scrolled")
}
});

Если кто-то знает решение данной проблемы, просьба поделиться.
Спасибо.

Амир Эргашев 6 месяцев назадСпасибо 0
0 чел.