• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Menu z position sticky źle się wyświetla

Aruba Cloud - Virtual Private Server VPS
0 głosów
270 wizyt
pytanie zadane 11 maja 2021 w HTML i CSS przez bazyl8796 Obywatel (1,020 p.)

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

 

1 odpowiedź

0 głosów
odpowiedź 11 maja 2021 przez VBService Ekspert (256,600 p.)

wink

.menu
{ 
    width: 100%;

    /* reszta kodu css */
    . . .

}

 

komentarz 11 maja 2021 przez bazyl8796 Obywatel (1,020 p.)
a nie da się jakoś kodu js zmodyfikować, żeby dodawał marginesy?
komentarz 11 maja 2021 przez VBService Ekspert (256,600 p.)
edycja 11 maja 2021 przez VBService

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 ]

komentarz 11 maja 2021 przez bazyl8796 Obywatel (1,020 p.)
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 :/
komentarz 11 maja 2021 przez VBService Ekspert (256,600 p.)

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

 

Podobne pytania

0 głosów
2 odpowiedzi 301 wizyt
0 głosów
1 odpowiedź 850 wizyt
0 głosów
1 odpowiedź 778 wizyt
pytanie zadane 7 maja 2020 w HTML i CSS przez poldeeek Mądrala (5,980 p.)

93,327 zapytań

142,323 odpowiedzi

322,396 komentarzy

62,657 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...