sticky tes

by Angelo Tirambulo

HTML

<div class="headerwrap">
    <div class="container-header">
        <div class="container-websitename-logo">
            <h1 class="website-name">
                        Charts 
                        <p class="website-tagline">about nothing/everything
                        </div>
                </div>
                <div class="nav-container"> </div>
            </div>
            </div>
        </div>
        </header>
    <main>
        <div class="container-main">
            <div class="content-main intro-text">
                <p class="intro-text-text">
                    None of the charts are based on any scientific information. Everything is based on non-sense and sophmoric humor.
                </p>
            </div>
        </div>

        <div class="container-main creative-process">
            <div class="content-main">
                <div class=" container-charts-header">
                    <p class="charts-header-text"> The Creative Process
                    </p>
                </div>



                <div class="container-infographic">

                    <div class="box-container">
                        <div class="box dicking-around-color hide">
                            <p class="text-box">Dicking Around </p>
                        </div>
                    </div>

                    <div class="full-circle-container">
                      
                      <canvas id="myChart" width="500" height="500"></canvas>
                    </div>


                  

                    <div class="box-container">
                        <div class="box makingshit-color hide">
                            <p class="text-box">Making Shit</p>
                        </div>


                    </div>
                </div>
                 </div>
            </div>
        </div>

CSS

body,
main {
    width: 100%;
}

.headerwrap {
    position: fixed;
    top: 0;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, .75);
}

.container-header {
    display: flex;
    margin: 10% 4% 6% 5%;
    align-items: flex-end;
    justify-content: space-between;
}

main {
    padding-top: 23%;
}

@media only all and (min-width: 400px) {
    .container-header {
        margin: 10% 4% 6% 5%;
    }
}

@media only all and (min-width: 768px) {
    .container-header {
        margin: 5% 4% 4% 5%;
    }
}

.website-name {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.website-tagline {
    font-family: 'Yrsa', serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    text-transform: lowercase;
    margin-top: 1%;
}

@media only all and (min-width: 768px) {
    .website-name {
        font-size: 72px;
    }
    .website-tagline {
        font-size: 24px;
    }
}

.container-main {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-main {
    width: 90%;
    overflow: initial;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.intro-text {
    padding-bottom: 50%;
}

.intro-text-text {
    font-family: 'Yrsa', serif;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -3% line-height: 1.10;
}

@media all and (min-width: 768px) {
    .intro-text-text {
        font-size: 72px;
    }
}

@media all and (min-width: 1012px) {
    .intro-text-text {
        font-size: 100px;
    }
}

@media all and (min-width: 1440px) {
    .intro-text-text {
        font-size: 130px;
    }
}

.creative-process {
    background-color: rgba(189, 16, 224, .05);
    /*padding-bottom: 20%;*/
}

.reg-day {
    background-color: rgba(208, 2, 27, .05);
}

.shots {
    background-color: rgba(126, 211, 33, .05);
   ...

JavaScript

window.onscroll = function(e) {
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    console.log(scrollTop, left.offsetTop);
    // left.offsetTop;

    if (scrollTop >= stop) {
        left.className = 'stick';
    } else {
        left.className = '';
    }

}