Untitled

    <body>   
        <button class="social">🚀</button>

        
        <section id="one">
            <h2 class="red">Header one</h2> 
        </section>
        
        <section id="two">
            <h2 class="bisq">Header two</h2>
        </section> 
        
        <section id="three">
            <h2 class="orange">Header three</h2>
        </section>
        
        <footer>
            <a href="#one">one</a>
            <a href="#two">two</a>
            <a href="#three">three</a>
        </footer>

    </body>

section{
    width: 100vw;
    height: 100vh;
    text-align: center;
    position: sticky;
    top: 0;

}

.red{background-color: red; }
.bisq{background-color: bisque; }
.orange{background-color: orange; }

.social {
    position: fixed;
    top: 50vh;
    z-index: 1;

    font-size: 1.5rem;
    padding: 0.7rem;
    background-color: lightblue;
    border: none;
    border-radius: 0 0.75rem 0.75rem 0;
}

footer {
   
    position: fixed;
    bottom: 0;
}
Editor is loading...