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

pytanie zadane 15 lipca 2023 w HTML i CSS przez Nitr0Skay Użytkownik (690 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

odpowiedź 15 lipca 2023 przez Comandeer Guru (607,060 p.)
wybrane 17 lipca 2023 przez Nitr0Skay

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 (690 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 ;)