CSS, automatyczny margin top

pytanie zadane 10 maja w HTML i CSS przez EmilB Obywatel (1,040 p.)

Witam, mam takie pytanie ,czy da się zastosować margin, który odrazu jest po wejściu na strone, to znaczy wchodzę na strone i odrazu po wejściu na stronie wyświetla mi się 130px niżej strona (odrazu poniżej menu) lub coś w stylu, jeśli ruszę scrollem w dół lub w góre to wtedy wyświetla się menu od góry 130px.

Pozdrawiam

4 odpowiedzi

odpowiedź 10 maja przez EmilB Obywatel (1,040 p.)

odpowiedź 10 maja przez Panelinio Stary wyjadacz (10,210 p.)
edycja 10 maja przez Panelinio

odpowiedź 10 maja przez Toxc Dyskutant (8,400 p.)

odpowiedź 10 maja przez VBService Ekspert (255,840 p.)
edycja 10 maja przez VBService

... jeśli ruszę scrollem w dół lub w góre to wtedy wyświetla się menu ...

Możesz też użyć: window.scrollY

np.:

<style>
  :root {
    --header-height: 1.5rem;
    --header-padding: .5rem;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    margin-top: calc(130px + var(--header-height) + (var(--header-padding) * 2));
  }
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);    
    background-color: black;
    color: white;
    padding: var(--header-padding) 0;
    z-index: 9999;
    transition: top .3s ease-in-out;
  }
  .hide {
    top: -100px;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
  li {
    margin-left: 1rem;
  }
  section {
    height: 100vh;
  }
  section h2 {
    display: block;
    padding-top: calc(var(--header-height) + (var(--header-padding) * 2));
  }
</style>

<header class="hide">
  <nav>
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
    </ul>
  </nav>
</header>

<section id="section1">
  <h2>Section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id justo id elit blandit.</p>
</section>

<section id="section2">
  <h2>Section 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id justo id elit blandit.</p>
</section>

<section id="section3">
  <h2>Section 3</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id justo id elit blandit.</p>
</section>

<script>
  window.addEventListener("scroll", () => {
    const header = document.querySelector("header");
    if (window.scrollY > 0) 
      header.classList.remove("hide");
    else
      header.classList.add("hide");
    /*
    if (window.scrollY < 130) 
      header.classList.add("hide");
    else
      header.classList.remove("hide");
    */
  });
</script>