Sticky position not working for overlapping scrolling effect

Question

I'm trying to make an overlapping effect when the user scrolls using the sticky position and giving each div (section) a new background colour. However, even after setting top to 0 for the sticky position, the divs scroll out of the viewport. Any help would be great!

$(document).ready(function(){
 $('#about').click(function(){
            $('#aboutcontainer').slideToggle('slow');
        });
});

html, body {
 margin: 0 auto;
 font-size: 22px;
 width: 100%;
 height: 100%;
}

h3 {
 margin: 0;
}

ul, li {
 margin: 0 auto;
}

span {
 font-weight: 400;
}

.container {
 height:102vh;
}

.contentcontainer {
 display: flex;
   justify-content: center;
   align-items: center;
   height: auto;
}

.vertical-center {
 margin: 0;
 position: absolute;
 top: 50%;
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}

#navbar {
 width: 100%;
 position: sticky;
 top: 0px;
 background-color: #ffffff;
 font-family: Abel;
 height: 100px;
}

#desktop-nav-wrapper {
 padding: 0 45px;
 height: inherit;
 position: relative;
}

#logo {
 font-size: 200%;
    width: auto;
    float: left;
    letter-spacing: 3px;
}

#desktop-nav-wrapper ul {
 margin-top: 6.5vh;
 float: right;
}

#desktop-nav-wrapper li {
 position: relative;
 display: inline-block;
 padding-left: 25px;
 font-weight: 300;
 color: #000000;
 font-family: Abel;
}

#desktop-nav-wrapper li:nth-child(even):hover {
 cursor: default;
}

#desktop-nav-wrapper li:nth-child(odd):hover {
 cursor: pointer;
}

#aboutcontainer {
    display: none;
    background-color: #ffffff;
}

#aboutcontainer p {
    margin-bottom: 0;
    padding-left: 45px;
    text-align: left;
    width: 80%;
    font-family: Lato;
    font-weight: 300;
    font-size: 92%;
}

#one {
 background-color: #ffd700;
 position: sticky; 
 top: 0;
}

#two {
 background-color: #468499;
 position: sticky;
 top: 0;
}

#three {
 background-color: #468499;
 position: sticky; 
 top: 0;
}

@media only screen and (max-width: 768px) {

 #logo {
  margin-top: -1vh;
 }

#desktop-nav-wrapper {
 padding: 0 15px;
 height: inherit;
}

#desktop-nav-wrapper ul {
 float: left;
 padding-left: 0;
 width: 100%;
 margin-top: 11vh;
}

#desktop-nav-wrapper li {
 position: relative;
 display: inline-block;
 padding-left: 0;
 margin-right: 2%;
 font-weight: 300;
 color: #000000;
 font-family: Abel;
}

#aboutcontainer p {
    margin-bottom: 0;
    padding-left: 15px;
    text-align: left;
    width: 90%;
    font-family: Lato;
    font-weight: 300;
    font-size: 80%;
}

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar">
 <div id="desktop-nav-wrapper">
     <h3 id="logo" class="vertical-center">Test Header</h3>
         <ul>
             <li id="about" class="desktop-items">about</li>
         </ul>
    </div>
 </div>

 <div id="aboutcontainer" style="display: none;">
   <p>
      Phasellus vitae semper risus. Quisque in finibus nisi. Sed non rhoncus purus, eu luctus orci. Vestibulum massa nisi, bibendum eget libero ut, tempor mattis metus. Maecenas placerat nisl non mauris fringilla ultricies. Phasellus dignissim velit vitae tellus sodales luctus. Nullam tempus turpis vitae nunc lacinia faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget volutpat nunc. Cras et libero et ligula suscipit finibus et id dui. Duis odio enim, interdum vitae ullamcorper ut, sagittis vitae metus. Phasellus feugiat libero metus, sed tempor erat porttitor ut. Integer vel libero eu ante sollicitudin fermentum non quis nisl. Aliquam blandit dignissim sem, et malesuada risus venenatis eget. Nulla pretium ornare dui fermentum cursus. 
     </p>
</div>

<div class="container" id="one">
 <div class="contentcontainer">
  <h3>One</h3>
 </div>
</div>

<div class="container" id="two">
 <div class="contentcontainer">
  <h3>Two</h3>
 </div>
</div>

<div class="container" id="three">
 <div class="contentcontainer">
  <h3>Three</h3>
 </div>
</div>

https://stackoverflow.com/questions/49848196/css-position-sticky-not-working-when-height-is-defined — kukkuz, Mar 31 '19 at 16:33

score 1 · Accepted Answer · answered Mar 31 '19 at 16:24

1

Figured it out... Turns out position: sticky isn't a fan of HTML and body having their height set to 100%. I removed it and it now works fine.

answered Mar 31 '19 at 16:24

dumbquestionsbydumbpeople

317
3
11

Sticky position not working for overlapping scrolling effect

1 Answers1