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

Page-title jako sekcja, zmieniająca się w belkę

VPS Starter Arubacloud
0 głosów
119 wizyt
pytanie zadane 15 lipca 2023 w HTML i CSS przez Nitr0Skay Użytkownik (670 p.)

Witam. Dzisiaj przychodzę do Was z nietypowym problemem (a może i typowym, no nie wiem).

Generalnie mam pewna wizję na element header, który owija link owijający h1:

<header id="page-title"> 
   <a href="/"> <h1> Tytuł strony z fajnym opisem </h1> </a> 
</header>

Wizja jest taka, żeby wyglądało to jako sekcja powitalna, rozciągnięta na cały ekran w momencie:

-  wejścia na stronę

-   przeskrolowania z dołu strony, na samą górę

-  Gdy aktywny jest element "page-title" (w linku jest #page-title)

 

Natomiast gdy przeskrolujemy na dół strony, chciałbym aby ta sekcja zmieniała się w belkę przylegającą do góry strony na określoną wysokość (coś ala position: fixed; top: 0)

Innymi słowy, ma element ten ma wyglądać dwojako, w zależności od tego, w którym miejscu strony się znajdujemy. 

Imo brzmi to jak robota dla Java Scriptu przy pomocy wykorzystania element.classList.add(); i element.classList.remove();  ale czy jest może jakaś sposobność zrobienia tego w samym CSS ? :)

2 odpowiedzi

+1 głos
odpowiedź 15 lipca 2023 przez Comandeer Guru (603,600 p.)
wybrane 17 lipca 2023 przez Nitr0Skay
 
Najlepsza

Nie da się tego ogarnąć w samym CSS-ie, bo brakuje pseudoklasy do wykrycia, kiedy element jest "przyklejony" (były jakieś dyskusje wokół tego, ale chyba nic się nie wykluło ostatecznie). Są jakieś hacki, ale to właśnie hacki – zdecydowanie lepiej użyć tutaj IntersectionObservera.

+1 głos
odpowiedź 15 lipca 2023 przez infinityhost Użytkownik (780 p.)
Znaczy, że żeby miała na początku wysokość całego ekranu, a po skrolowaniu zamieniała się w wąski pasek na górze?
komentarz 15 lipca 2023 przez Nitr0Skay Użytkownik (670 p.)
Dokładnie tak. O to mi chodzi.

I nie wiem, czy da się to zrobić przy pomocy czystego CSSa.

Jeżeli tak, to chciałbym dostać jakieś nakierowanie. A jeżeli nie, to wiem, że powinienem nadać określoną klasę na ten element przy pomocy JS który będzie posiadał odpowiednie style i tyle ;)
komentarz 15 lipca 2023 przez infinityhost Użytkownik (780 p.)
Wszystko w programowaniu możesz zrobić na milion sposobów.

Zapytanie do AI wygląda tak

"how to make element which at the begining has height of all the screen while scrolling becaming a 10% height - element is label here

 

" <html><body> <label style="display:flex;height:800px;width:600px;background-color:red;color:white;position:fixed;">aaaaaaaaa</label> <button style="display:flex;height:200px;width:600px;">aaaaaaaaa</button> <button style="display:flex;height:200px;width:600px;">aaaaaaaaa</button> <button style="display:flex;height:200px;width:600px;">aaaaaaaaa</button> <button style="display:flex;height:200px;width:600px;">aaaaaaaaa</button> <button style="display:flex;height:200px;width:600px;">aaaaaaaaa</button> <button style="display:flex;height:200px;width:600px;">aaaaaaaaa</button> <button style="display:flex;height:200px;width:600px;">aaaaaaaaa</button> <button style="display:flex;height:200px;width:600px;">aaaaaaaaa</button> </body></html>"

 

Ewidentnie to skiepscił ale coś się rozszerza.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }
    #myLabel {
      display: flex;
      width: 600px;
      background-color: red;
      color: white;
      position: fixed;
      top: 0;
      left: 0;
      transition: height 0.5s ease; /* Adding a smooth transition effect */
    }
    #content {
      margin-top: 800px; /* Adding margin to make room for the label initially */
    }
  </style>
  <script>
    window.addEventListener('scroll', function() {
      var label = document.getElementById('myLabel');
      var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
      var labelHeight = window.innerHeight - scrollHeight;
      label.style.height = (labelHeight * 0.1) + 'px';
    });
  </script>
</head>
<body>
  <label id="myLabel">aaaaaaaaa</label>
  <div id="content">
    <button>aaaaaaaaa</button>
    <button>aaaaaaaaa</button>
    <button>aaaaaaaaa</button>
    <button>aaaaaaaaa</button>
    <button>aaaaaaaaa</button>
    <button>aaaaaaaaa</button>
    <button>aaaaaaaaa</button>
    <button>aaaaaaaaa</button>
    <button>aaaaaaaaa</button>
  </div>
</body>
</html>

 

Męcz dziada niech poprawia ;)
komentarz 15 lipca 2023 przez Nitr0Skay Użytkownik (670 p.)

Zapytanie do AI wygląda tak

 

Dlatego właśnie sceptycznie podchodzę do całego AI...

Dziękuję

 

Podobne pytania

0 głosów
1 odpowiedź 226 wizyt
0 głosów
1 odpowiedź 182 wizyt
pytanie zadane 26 marca 2019 w JavaScript przez pietia213 Dyskutant (8,110 p.)
0 głosów
1 odpowiedź 236 wizyt

92,775 zapytań

141,703 odpowiedzi

320,560 komentarzy

62,109 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!

...