Menu z position sticky źle się wyświetla

Question

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;
}

 

Answer 1

.menu
{ 
    width: 100%;

    /* reszta kodu css */
    . . .

}

 

Comments

a nie da się jakoś kodu js zmodyfikować, żeby dodawał marginesy?

---

Nie bardzo rozumiem w jakim kontekście tego potrzebujesz, ale poniżej masz przykład jak z poziomu js-a można wpływać na "style" elementu.

 

<button>Dodaj margin inline</button>
<button>Reset</button>
<div class="box"></div>
<button>Dodaj margin class</button>
<div class="box"></div>

button {
  margin: 1em;
}
.box {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: all 1s;
}

.margin2em {
  margin: 2em;
}

const div_boxs = document.querySelectorAll('.box');
const buttons = document.querySelectorAll('button');
 
buttons.forEach(button => {
  button.addEventListener('click', (e) => {
    if (e.target.textContent.includes('inline')) {
      // inline
      div_boxs[0].style.margin = '2em';
    } else if (e.target.textContent.includes('Reset')) {
      div_boxs[0].style = '';
    } else {
      // class
      div_boxs[1].classList.toggle('margin2em');
      // lub  div_boxs[1].classList.add('margin2em');
    }
  })
})

 

 

[ What's the difference between inline styles vs classes? ]

[ Element.classList ]  [ Element.className ]  [ ElementCSSInlineStyle.style ]

---

Ogólnie rzecz, biorąc to zrobiłem menu z position:sticky, które ma width:50%, więc gdy scrolluję to ze środka menu przeskakuje mi na lewy skraj strony, więc miałem nadzieję, że mógłbym jakoś w js tak zrobić, żeby menu było jednak cały czas na środku :/

---

Chyba już "łapię" o co chodzi, gdy ustawiasz position do elementu, domyślnie jego:

top, left, bottom, right mają wartość 0 (zero).

.sticky
{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}