Cześć,
zrobiłem menu, które "zostaje na górze" dzięki position sticky tak jak w kursie Pasji Informatyki css3, lecz menu ma 50% szerokości, a nie 100%. Przez to gdy przewijam, to nie "zostaje" na idealnym środku jak normalnie, lecz "przeskakuje" na lewą stronę. Byłbym wdzięczny za pomoc i sugestie co zrobiłem źle.
Pozdrawiam
<div class="menu">
<ol class="topmenu">
<li> <a href="#">Strona Główna</a></li>
<li> <a href="#">Wsparcie</a></li>
<li> <a href="#">Kontakt</a></li>
<li> <a href="#">Współpraca</a></li>
</ol>
</div>
script src="menu.js"></script>
<script>
$(document).ready(function() {
var NavY = $('.menu').offset().top
var stickyNav = function(){
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('.menu').addClass('sticky');
} else {
$('.menu').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
.menu
{
width: 50%;
padding: 10px 0;
background-color:rgb(66, 80, 156);
border-bottom: 1px solid rgb(38, 46, 90);
border-left: 1px solid rgb(38, 46, 90);
border-right: 1px solid rgb(38, 46, 90);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.menu ol
{
padding: 0px;
margin: 0;
list-style-type: none;
font-size: 15px;
height: 20px;
display: inline-block;
}
.menu ol a
{
color: #ffffff;
text-decoration: none;
display: block;
padding:0px 20px;
}
.menu ol > li
{
float: left;
}
.sticky
{
position: fixed;
}