lepljiva navigacijska vrstica, sticky navbar

Lepljiva navigacijska vrstica

Lepljiva navigacijska vrstica (ang. Sticky navigation bar) je vrsta navigacijske vrstice, ki ostane pritrjena na vrhu zaslona, medtem ko se uporabnik premika po vsebini strani. Omogoča stalno dostopnost navigacijskih možnosti, ne glede na to, kje na strani se uporabnik nahaja.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>lepljiva navigacijska vrstica, sticky navbar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

@media screen and (max-width: 840px) {
            .searchBox {
                float: none;
                width: 100%;
            }
            .searchBox input[type=text] {
                font-size: 24px;
                padding-top: 10px;
            }
        }
    </style>
</head>
<body>
<div class="header">
    <p>Dobrodošli v CSS vadnico!</p>
</div>

<div class="navbar" id="navbar">
    <a href="#">DOMOV</a>
    <a href="#">DEMO 01</a>
    <a href="#">DEMO 02</a>
    <a href="#">DEMO 03</a>
    <a href="#">DEMO 04</a>
    <a href="#">DEMO 05</a>

<div class="container">
    <h1>Kaj je Lorem Ipsum?</h1>
    <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v
        uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku
        16. stoletja. To besedilo pa ni zgolj preživelo pet stoletij, temveč se je z malenkostnimi spremembami uspešno
        uveljavilo tudi v elektronskem namiznem založništvu. Na priljubljenosti je Lorem Ipsum pridobil v sedemdesetih
        letih prejšnjega stoletja, ko so na trg lansirali Letraset folije z Lorem Ipsum odstavki. V zadnjem času se
        Lorem Ipsum pojavlja tudi v priljubljenih programih za namizno založništvo kot je na primer Aldus PageMaker.</p>
    <h2>Od kod prihaja?</h2>
    <p>V nasprotju z ustaljenim prepričanjem, Lorem Ipsum ni zgolj naključno besedilo. Njegove korenine segajo v dela
        klasične latinske literature izpred 2000 let. Richard McClintock, profesor latinščine na Hampden-Sydney College
        v Virginiji, je iz odstavka Lorem Ipsum izbrskal redko uporabljano latinsko besedo, consectetur, in poiskal njen
        izvor. Ugotovil je, da Lorem Ipsum prihaja iz odlomkov 1.10.32 in 1.10.33. Cicerovega dela "de Finibus Bonorum
        et Malorum" (Skrajnosti dobrega in zla), napisanega leta 45 pr.n.št. To delo razpravlja o teoriji etike in je
        bilo izredno priljubljeno v obdobju renesanse. Prva vrstica Lorem Ipsuma, "Lorem ispum dolor sit amet..",
        prihaja iz odlomka 1.10.32. Izvirni odlomek Lorem Ipsuma, ki je v rabi od 16. stoletja naprej, je predstavljen v
        nadaljevanju te strani. Tudi odlomka 1.10.32 in 1.10.33 iz Cicerovega dela "de Finibus Bonorum et Malorum" sta
        dobesedno prenesena iz originala in opremljena z angleškim prevodom H. Rackhama iz leta 1914.</p>
    <h3>Zakaj ga uporabljamo?</h3>
    <p>Dokazano je, da razumljiva vsebina, med pregledovanjem oblikovne rešitve določene strani, neželeno preusmeri
        pozornost bralca. Ker ima Lorem Ipsum relativno enakomerno razporeditev znakov uspešno nadomesti začasna
        vsebinsko pomenska besedila. Veliko namizno založniških programov in spletnih urejevalnikov uporablja Lorem
        Ipsum kot privzeti slepi tekst. Zato spletno iskanje s ključnimi besedami "lorem ipsum" vrne številne zadetke še
        nedokončanih spletnih mest. Tekom let so namreč nastale številne različice tega slepega teksta, bodisi
        nenačrtovano ali namenoma, z različnimi šaljivimi in drugimi vložki.</p>
    <h3>Kje ga lahko dobim?</h3>
    <p>Obstajajo številne različice Lorem Ipsuma, vendar so za večino le-teh značilne raznovrstne prilagoditve z
        dodajanjem različnih šaljivih in drugih vložkov. Zato je pomembno, da se ob uporabi Lorem Ipsuma najprej
        prepričate, da se v odlomkih ne skriva, kaj neprijetnega. Naša različica Lorem Ipsuma temelji na slovarju z več
        kot 200 latinskimi besedami, ki se s pomočjo modela stavčnih struktur povezujejo v bolj smiselne stavke.
        Generirano Lorem Ipsum besedilo je tako brez ponavljanj, šaljivih vložkov in neprimernih vrinjenih besed ter
        drugih neprijetnih dodatkov.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.</p>
</div>

const navbar = document.getElementById("navbar");
    const lepljivo = navbar.offsetTop;

function lepljivaVrstica() {
        if (window.pageYOffset >= lepljivo) {
            navbar.classList.add("sticky")
        }   else {
            navbar.classList.remove("sticky")
        }
    }
</script>
</body>
</html>