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

Użycie polecenia: "position"

VPS Starter Arubacloud
0 głosów
244 wizyt
pytanie zadane 10 marca 2018 w HTML i CSS przez SZYMII Użytkownik (510 p.)
edycja 10 marca 2018 przez SZYMII

Posiadam następujący problem:

Chciałbym, aby moje menu znajdowało się na jakiejś grafice, a następnie gdy przejadę w dół strony, pojawiło się przyklejone do górnej krawędzi strony.

Użyłem, więc polecenia:

position: absolute;

Następnie przeszedłem do efektu przyklejenia menu głównego, które występowało w odcinku :

Kurs CSS odc. 3: Rozwijane, przyklejane menu główne (sticky)

Chciałem użyć do tego poleceń:

position: sticky;
top: 0px;
z-index: 1;

Lecz zorientowałem się, że polecenie position już występuję, więc zwracam się z pytaniem do was.

Jak wykonać efekt opisany wyżej wyłącznie za pomocą HTML oraz CSS?

 

Użyłem samego polecenia sticky, efekt jest jaki miał być lecz menu przyklejone jest do momentu kiedy kończy się obrazek.

2 odpowiedzi

+1 głos
odpowiedź 10 marca 2018 przez pablop76 VIP (123,240 p.)
wybrane 10 marca 2018 przez SZYMII
 
Najlepsza

Jeżeli menu jest od początku na górze strony to można użyć fixed;

<nav class="nav">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</nav>
<article class="article">
  <header class="header">MENU FIXED</header>
</article>
body{
  margin: 0;
}
.nav{
  width: 100%;
  height: 60px;
  background-color: #000000;
}
ul{
  position: fixed;
  left: 0;
  right: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
}

li{
  display: inline-block;
  width: 200px;
  line-height: 60px;
  font-size: 33px;
  color: #fff;
  background-color: #a71930;
}
.article{
  height: 1000px;
  background-color: #a5acaf;
  color: #a71930;
  text-align: center;
  font-size: 10em;
}
.header{
  padding-top: 20px;
  position: relative;
}

 

komentarz 10 marca 2018 przez SZYMII Użytkownik (510 p.)

Działa, bardzo dzięki. :D

Problem miałem w tym, że moje menu znajdowało się w divie wyłącznie odpowiedzialnym za jakąś cześć strony, a nie całą stronę i position: sticky działało wyłącznie w tym divie.

Coś na wzór tej strony:

https://grafmag.pl/kategoria/poradniki

+1 głos
odpowiedź 10 marca 2018 przez Kiele Obywatel (1,530 p.)
Może trochę odbiegnę od tematu, ale nie polecam używania position:sticky, przynajmniej na razie.

https://caniuse.com/#search=sticky
komentarz 10 marca 2018 przez SZYMII Użytkownik (510 p.)
edycja 10 marca 2018 przez SZYMII
Strona jest robiona jedynie na zadanie z witryn i aplikacji internetowych, więc jedynie ma być ona zgodna z walidatorem, a następnie wrzucona na serwer hostujący.

Mirosław Zelent mówił o tym w odcinku w odcinku 3, lecz niestety jestem na poziomie HTML oraz CSS i nie chciałbym jeszcze dołączać jawy do mojej strony internetowej.

Co do wyżej problemu, użyłem samego polecenia sticky, efekt jest jaki miał być lecz menu przyklejone jest do momentu kiedy kończy się obrazek.
komentarz 10 marca 2018 przez Kiele Obywatel (1,530 p.)
Znajdowało się na grafice to rozumiem że ma na ten obrazek "najechać"?

w takim razie użyj transform: translate

https://codepen.io/Kiele/pen/yKydNL

Jeśli nie o to chodzi pokaż kod źródłowy.

Podobne pytania

0 głosów
1 odpowiedź 223 wizyt
pytanie zadane 2 lutego 2021 w HTML i CSS przez Mlorism Użytkownik (580 p.)
0 głosów
1 odpowiedź 780 wizyt
0 głosów
1 odpowiedź 672 wizyt
pytanie zadane 7 maja 2020 w HTML i CSS przez poldeeek Mądrala (5,980 p.)

92,829 zapytań

141,771 odpowiedzi

320,814 komentarzy

62,158 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.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...