sticky menu "stopki"

pytanie zadane 8 sierpnia 2021 w HTML i CSS przez NA Użytkownik (590 p.)
zamknięte 8 sierpnia 2021 przez NA

otóż mam problem. Nie wiem nawet jak go nazwać. Chodzi o strony full page, czyli strona bez oddzielnych podstron. Gdy ustawimy sticky menu czyli menu przyklejone do strony. Możemy to zrobić position: fixed. ALE przyklejane menu nie zmienia swojej aktywności. O co chodzi? Otóż gdy mamy menu i są tam takie przyciski ja Home About i gdy wchodzimy na strone to działa wszsytko perfekcyjnie bo wyrużniane jest Home. Problem pojawia się wtedy gdy zjedziemy do About. menu nie wyróżnia przycisku który powinen być. jeś li ktoś rozumie o co mi chodzi to niech powie jak to nazwać bo nie wiem co w przeglądarke wpisać. Dziękuje z góry za wszstkie odpowiedzi

komentarz zamknięcia: problem rozwiązany

1	komentarz 8 sierpnia 2021 przez SzkolnyAdmin Szeryf (86,360 p.) Pokaż problematyczny kod.

komentarz 8 sierpnia 2021 przez Zaqu93 Gaduła (4,850 p.)

@NA, W czym jest napisana twoja aplikacja?

komentarz 8 sierpnia 2021 przez NA Użytkownik (590 p.)

To nie jest aplikacja internetowa. Zwykły najprostszy html css i js. Oczywiście jest także formularz kontaktowy napisany w PHP ale on nie jest narazie problemem

komentarz 8 sierpnia 2021 przez NA Użytkownik (590 p.)

Gdzie mogę go wstawić?

komentarz 8 sierpnia 2021 przez VBService Ekspert (252,740 p.)

Jak wstawić do pytania kod źródłowy?

1	komentarz 8 sierpnia 2021 przez NA Użytkownik (590 p.) 5 minut i wstawiam

komentarz 8 sierpnia 2021 przez NA Użytkownik (590 p.)

Oto cały kod strony

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Oliwier Rogowski - Portfolio</title>
   
        <meta name="description" content="Witam mam na imię Oliwier i zajmuję się programowaniem od kilku lat. Jest to moja pasja, a z każdym nowym zleceniem jestem coraz lepszy. Programuję w takich językach jak Python C++ C# oraz JavaScript. Dobrze znam także html oraz css. Zapraszam do zapoznania się z moim portfolio oraz kontaktu.">
        <meta name="keywords" content="słowa, kluczowe, opisujące, zawartość">
        <meta name="author" content="Oliwier Rogowski">
   
        <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="fontello-50761991/css/fontello.css" type="text/css">
        <link rel="stylesheet" href="main.css">
        <link rel="stylesheet" href="index.js">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
        <link rel="shortcut icon" href="ogień logo.svg">
    </head>
    <body>
        <header>
            <a href="#" class="logo">OLIWIER ROGOWSKI</a>
            <ul>
                <li><a href="#" class="active">HOME</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <section class="home">
            <img src="stars.png" id="stars"> 
            <img src="moon.png" id="moon">
            <img src="nothing.png" id="nothing">
            <img src="third_plan.png" id="third">
            <img src="moutiant.png" id="moutiant">
            <h2 id="text">Oliwier Rogowski</h2>
            <img src="moutiant_front.png" id="moutinat_front">
        </section>
        <div class="about">
            <h2>About</h2>
            <p>AAWDJNAODNWADNWONDALSKDNWOAN</p>
        </div>
        <script>
            let stars = document.getElementById('stars')
            let moon = document.getElementById('moon')
            let third = document.getElementById('third')
            let moutiant = document.getElementById('moutiant')
            let text = document.getElementById('text')
            let moutinat_front = document.getElementById('moutinat_front')

            window.addEventListener('scroll',function(){
                let value = window.scrollY;
                stars.style.left = value + 'px'
                moon.style.top = value * 0.25 + 'px'
                moutiant.style.top = value * 0.20 + 'px'
                third.style.top = value * 0.15 + 'px'
                text.style.marginRight = value * 9 + 'px'
            })
        </script>
    </body>
</html>

css:

*
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    box-sizing:border-box;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    scroll-behavior: smooth;
}

body
{
    overflow-x: hidden;
    min-height:100vh;
    background: linear-gradient(#8939CF,#FF5A54, #FFFF61);
}

header
{
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    padding: 30px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index:10000;
}

header .logo
{
    color: #fff;
    font-weight: 700;
    text-decoration:none;
    font-size:2em;
    text-transform: uppercase;
    letter-spacing: 2px;
}
header ul 
{
    display: flex;
    justify-content: center;
    align-items:center;
}
header ul li
{
    list-style:none;
    margin-left:20px;
}
header ul li a
{
    text-decoration: none;
    padding: 6px 15px;
    color: #fff;
    border-radius: 20px;
}

header ul li a:hover, 
header ul li a.active
{
    color: #2b1055;
    background: #fff;
    transition-property: color, background;
    transition-duration: 1s;
}
section
{
    position: relative;
    width: 100%;
    height:100vh;
    padding:100px;
    display:flex;
    align-items:center;
    justify-content: center;
}

section img 
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    object-fit: cover;

}

section img#moutinat_front
{
    z-index:10
}
#text
{
    position: absolute;
    color:#eee;
    white-space: nowrap;
    font-size: 5.5vw;
    z-index:9;
    right: -350px;
}
.about
{
    width:100%;
    height:100vh;
    padding:100px;
    position:relative;
    background: #a32c2c;
}
.about h2
{
    padding:100px;
    float:left;
    font-size:3em;
}

komentarz 8 sierpnia 2021 przez VBService Ekspert (252,740 p.)

ktoś rozumie o co mi chodzi to niech powie jak to nazwać bo nie wiem

spróbuj z: highlight active tab css js

1 odpowiedź

odpowiedź 8 sierpnia 2021 przez VBService Ekspert (252,740 p.)
edycja 8 sierpnia 2021 przez VBService

Najlepsza

Twój kod menu:

<ul>
    <li><a href="#" class="active">HOME</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
</ul>

żeby uzyskać opisany przez Ciebie efekt musisz dynamicznie przypisywać klasę "active" do aktualnie klikniętej zakładki w menu. Możesz wykorzystać do tego w javascript:

element.classList.add
element.classList.remove

można ten efekt osiągnąć też za pomocą samego css-a tylko przez użycie <label> i "ukrytych" <input type="radio">

[ edit ]

drugi przykład dla rozpoczynających swoją przygodę z css-em, może być problematyczny w zaimplementowaniu. Przygotowałem mam nadzieję łatwy do zrozumienia przykład on-line.

komentarz 8 sierpnia 2021 przez NA Użytkownik (590 p.)

nie wiem jak to powiedzieć. To także się przyda i zaimplementuje to do mojej strony (pierwszy przykład) ale jak zrobić aby menu zmieniało się podczas przewijania nie klikając na nie. Nie wiem czy dobrze zrozumiałem ale to jest rozwiązanie tylko dla kliknięcia?

komentarz 8 sierpnia 2021 przez VBService Ekspert (252,740 p.)

Chyba o to Tobie chodzi.

Sticky Table of Contents with Scrolling Active States

Zamieszczony przykład w artykule ("ramka" codepen, zakładka js)

komentarz 8 sierpnia 2021 przez NA Użytkownik (590 p.)

Tak właśnie o to. Dziękuje wam wszystkim, ale głównie @VBservice za rozwiązanie problemu. Jestem naprawdę wdzięczny za wszelaką pomoc. W związku też z tym że raczej nie ma lepszej odpowiedzi na moje pytanie zamknę temat. Jeszcze raz dziękuje wszystkim i życzę miłego dnia czy też wieczoru w zależności kiedy to czytasz.