skroll spy test1

by Petr Haluza

HTML

<header>
  <h1>test skrolovaciho menu ve stránce</h1>
	<h1>...</h1>
	<h1>..</h1>
</header>


  <section>
    <div class="scrollspy-nav" role="navigation" aria-label="Navigation test one">

      <ul>
        <li>
          <a href="#section-1" aria-current="true">popis</a><div data-marker=""></div>
        </li>
        <li>
          <a href="#section-2">herní výkon</a>
        </li>
        <li>
          <a href="#section-3">parametry</a>
        </li>
        <li>
          <a href="#section-4">varianty</a>
        </li>
        <li>
          <a href="#section-5">podobné</a>
        </li>
      </ul>
    </div>

    <article id="section-1">
      <h2>popis</h2>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et, quaerat
        veritatis maxime delectus, amet veniam omnis repellendus dolorem
        recusandae, libero obcaecati. Aspernatur, consequatur! Ex provident
        molestias optio cum eum? Esse?
      </p>
      <p>
        Sed sit veritatis pariatur iste assumenda fugiat repellat commodi
        perspiciatis. Deserunt vel corrupti est? Aut harum ducimus illo,
        exercitationem nisi facilis molestiae, repellendus accusamus voluptates
        provident nihil aliquid, quo nulla!
      </p>
      <p>
        Esse facere est unde, temporibus exercitationem recusandae aspernatur
        quidem sequi sapiente commodi doloribus atque minus quibusdam nesciunt?
        Voluptate explicabo libero expedita perferendis fugit temporibus aliquid
        tempore distinctio? Odit, iste enim!
      </p>
      <p>
        Quas ipsa nihil inventore obcaecati laborum voluptatem, magni molestias
        dignissimos placeat commodi ut ipsam adipisci tempora labore rerum
        facilis officiis, vel esse, doloribus delectus? Excepturi sunt quaerat
        error inventore omnis?
      </p>
      <p>
        Suscipit iusto dolorem magnam recusandae aut iure incidunt illum
        obcaecati aliquam ratione quis fugiat, pariatur reprehenderit...

CSS

.scrollspy-nav { top:0; position: sticky; transition: all 1s}
.scrollspy-nav ul { margin: 0 auto; padding: 10px; display: flex;  gap: 2em; list-style:none; justify-content:center}



html {  scroll-behavior: smooth;  }
section { max-width: 600px; margin: 0 auto; }
article {scroll-margin-top: 50px;}
.sticky {background: white; box-shadow: 0 10px 10px -10px black;}

JavaScript

$(document).scroll(function(){
    var el = $('.scrollspy-nav'),
        //top = $(document).scrollTop();
				top = $(document).scrollTop() - 160;
    if (top < 20 && el.is('.sticky')){
        $(el).removeClass('sticky');
    }
    if (top > 20 && !el.is('.sticky')){
        $(el).addClass('sticky');
    }  
});