Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][bootstrap] tło dla marginesu containera przy position:sticky
Forum PHP.pl > Forum > Przedszkole
poczatkujaca12


Mam stronkę w układzie po lewej stronie - działa, fajnie...
po zjechaniu przy przeglądaniu strony ma przewinąć się logo i menu ktore jest nizej (w container)
dodanie

  1. <div id="nav" class="pasek">
  2. <div class="container">
  3. <div class="row ">
  4. <div class="col col-lg-6">menu</div>
  5. <div class="col col-lg-6">menu</div>
  6. </div>
  7. </div>
  8. </div>

CSS:
  1. #nav{
  2. padding:10px 0;
  3. width:100%;
  4. box-shadow: 0 3px 6px #ddd;
  5. }
  6. .pasek {
  7. position: -webkit-sticky;
  8. position: sticky ;
  9. padding-top:10px;
  10. top: 0px;
  11. background: #fff;
  12. }


I pasek działa - przewija się... tylko nie wiem jak dodać logo po lewej stronie jak na obrazku po prawej tylko w momencie przewijania się strony...
są jakieś w miarę proste sposoby?
trzeba zastosować JS?
Nie da się tak?

Próbowałam z before przed container, row, lub col...
bez efektu :/
mrk9109
Polecam kurs i poczytać dokładnie o siatkach źle wogule budujesz siatkę strony w boostrap w skrócie treść znajduje sie zawsze w cointainer w niej robisz row a w nim dzielisz komórki czyli możesz zrobić 3x col-4 i wtedy masz jedno dla logo dwa do menu . Na dodatek w cointaer wstawiasz gotowa funkcje stick czyli class=„coinater sticky-top”
poczatkujaca12
sticky-top mi nie działa...
i tak buduję siatkę - container w nim row w nim col...
trueblue
.container wcale nie musi być najbardziej zewnętrznym elementem. Siatka też nie musi być równomierna.

poczatkujaca12, musisz użyć JS - zdarzenia onScroll lub lepiej IntersectionObserverAPI.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.