CSS sticky property goes away past screen size

Question

I am working on an application and have ran into some CSS styling issues. I am battling against position: sticky and have found myself stuck in a hole I'm not sure how to escape from.

My desired end result is to have a page that is scrollable, but I want the

(white background),

(yellow background), and

(pink background) to be "sticky" at the top as the user scrolls the page (visual representation of desired result).

The charts will be constant in sizing, but the list of questions will be an undetermined length. As the user scrolls through the list of questions, I want them to always have easy access to the search bar and breadcrumb heading.

What am I doing wrong?? Right now the yellow section behaves as expected up until a certain point, then it randomly decides to scroll away and ignore the sticky. (I'm not even sure where to begin with the pink section, especially since I can't figure out the first part!)

Any help and explanations would be much appreciated to help me learn for the future.

const dok = document.getElementById('dokChart').getContext('2d');
const dokChart = new Chart(dok, {
  type: 'doughnut',
  data: {
    datasets: [
      {
        data: [10, 20, 15, 5],
        backgroundColor: ['rgb(244, 238, 252)', 'rgb(211, 186, 243)', 'rgb(188, 151, 237)', 'rgb(155, 98, 228)'],
      },
    ],
    labels: ['DOK 1', 'DOK 2', 'DOK 3', 'DOK 4'],
  },
  options: {
    maintainAspectRatio: false, 
    animation: {
      duration: 0
    },
    plugins: {
      datalabels: {
        formatter: (value) => {
          return ' ' + value + ' questions';
        }
      }, 
      legend: {
        display: false,
      },
    }
  }
});

const attempts = document.getElementById('attemptsChart').getContext('2d');
const attemptsChart = new Chart(attempts, {
  type: 'bar',
  data: {
    labels: ['1st', '2nd', '3rd', '4th+'],
    datasets: [
      {
        label: 'Attempt Progression',
        backgroundColor: 'rgba(173, 173, 173)',
        data: [0.75, 1, 1.75, 2, 3],
      },
    ],
  },
  options: {
    animation: {
      duration: 0
    },
    scales: {
        xAxes: [{
          categorySpacing: 0
        }]
    },
    plugins: {
      datalabels: {
        anchor: 'center',
        align: 'center',
        color: '#666',
        font: {
          weight: 'normal',
        },
      },
      legend: {
        display: false,
      },
    },
  },
});

  nav {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 65px;
    padding: 0px 20px;
    box-sizing: border-box;
    font-size: 20px;
    color: #5F6368;
    background-color: white;
    border-bottom: 1px solid lightgray}

  body {
    margin: 0;
    position: absolute;
    top: 65px; left: 0px;
    width: 100%;
    height: calc(100vh - 65px);
    background-color: #FCFCFC;
    display: grid;
    grid-template-rows: 96px minmax(120px, 1fr);
    grid-template-areas:
      "top"
      "content"}

  /* --------[TITLE FEATURE]-------- */
  #top {
    grid-area: top;
    display: flex;
    position: sticky;
    top: 65px;
    justify-content: space-between;
    align-items: center;
    margin: 0px 40px;
    font-size: 38px;
    color: #484848;
    background-color: yellow;
    border-bottom: 1px solid lightgray}

  #breadcrumb {
    color: #484848;
    font-size: 14px;
    margin: 10px 40px;}

  #breadcrumb ul {
    padding: 0;
    margin: 0;
    list-style: none;}
    #breadcrumb li {display: inline}

  #breadcrumb li:not(:last-child)::after {
    content: '▸';
    margin: 0px 10px;}

  #breadcrumb a {
    text-decoration: none;
    color: #581F98;
    font-weight: 800}

 /* --------[CHARTS]-------- */
#content {
  margin: 20px 40px 0px 40px}

#content .charts {
  display: flex;
  width: 100%;
  border-bottom: 1px solid lightgray}

.charts .DOK {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  border-right: 1px solid lightgray}

.charts .attempts {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;}

/* ------ [TOP CONTROLS] ------ */
.selector {
    background-color: pink;
    display: flex;
    align-items: center;
    padding: 20px 0px;}

.selector .title {font-weight: 800}

.selector input[type='search'] {
    flex: 1;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 6px;
    margin: 0px 20px;
    padding: 8px 20px;
    border: 1px solid black;}

.selector button {
    margin-top: -6px;
    font-size: 16px}


/* ------ [QUESTIONS] ------ */
#content .questions {
  background-color: green;
  padding: 20px;}

/* Question box style */
#content .questions section {
  min-height: 200px;
  margin-bottom: 30px; /* Space under each question */
  border: 1px solid lightgray;
  background-color: white;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;}
  #content .questions section:hover {border: 2px solid #D4BBF1;}

/* Question excerpt style */
.questions section .excerpt {
  padding-bottom: 24px; /* Space under excerpt */
  font-size: 14px;
  font-style: italic;}

/* Main question style */
.questions section .question {
  padding-bottom: 16px; /* Space under question */
  font-weight: 800;}

/* Answer choice style */
.questions section li {
  margin-bottom: 10px; /* Space under each answer option */
  list-style: none;}
  .questions section ul {margin: 0px;}

/* Spacing for checkbox in answer */
.questions section input[type='checkbox'] {margin-right: 10px;}

/* Coloring for correct answer */
.questions section li.correct {
  color: #34CB4A;
  font-weight: 800;}


  
  
  
  
  



  
     Curriculum
    
      
        Main
        Curriculum
        Assessments
        Compare/Contrast
      
    
  
  
    
      
      
    
    
      16 Saved Questions:
      
      
    
    
      
        Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.
        What does the personification of the dough suggest?
        
          to repair something.
          to replace something.
          to remove something.
          to redo something.
        
      
      
        Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.
        What does the personification of the dough suggest?
        
          to repair something.
          to replace something.
          to remove something.
          to redo something.
        
      
      
         I was a sickly, delicate boy, suffered much from asthma, and frequently had to be taken away on trips to find a place where I could breathe. One of my memories is of my father walking up and down the room with me in his arms at night when I was a very small person, and of sitting up in bed gasping, with my father and mother trying to help me. I went very little to school. I never went to the public schools, as my own children later did, both at the "Cove School" at Oyster Bay and at the "Ford School" in Washington. For a few months, I attended Professor McMullen's school in Twentieth Street near the house where I was born, but most of the time I had tutors. As I have already said, my aunt taught me when I was small.
        What does the personification of the dough suggest?
        
          to repair something.
          to replace something.
          to remove something.
          to redo something.

user_14347617 · Answer

Yes, the functionality you are looking for is done with position: sticky. For this property to function, the following is needed: Apply the position: sticky and a property top, left, right, botton, with a coarse. I leave a code of the effect for a better understanding:

.styck_1{
    position: sticky;
    top: 2px;
}

.styck_2{
    position: sticky;
    top: 98px;
}


.styck_3{
    position: sticky;
    top: 193px;
}




    
    
    Position styck





    
        Text 1
    

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 

    
        Text 2
    


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 


    
        Text 2
    

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi.

Now let's fix the problem in your html. There is a property in your html that causes conflict. Here the code and then the explanation.

const dok = document.getElementById('dokChart').getContext('2d');
const dokChart = new Chart(dok, {
  type: 'doughnut',
  data: {
    datasets: [
      {
        data: [10, 20, 15, 5],
        backgroundColor: ['rgb(244, 238, 252)', 'rgb(211, 186, 243)', 'rgb(188, 151, 237)', 'rgb(155, 98, 228)'],
      },
    ],
    labels: ['DOK 1', 'DOK 2', 'DOK 3', 'DOK 4'],
  },
  options: {
    maintainAspectRatio: false, 
    animation: {
      duration: 0
    },
    plugins: {
      datalabels: {
        formatter: (value) => {
          return ' ' + value + ' questions';
        }
      }, 
      legend: {
        display: false,
      },
    }
  }
});

const attempts = document.getElementById('attemptsChart').getContext('2d');
const attemptsChart = new Chart(attempts, {
  type: 'bar',
  data: {
    labels: ['1st', '2nd', '3rd', '4th+'],
    datasets: [
      {
        label: 'Attempt Progression',
        backgroundColor: 'rgba(173, 173, 173)',
        data: [0.75, 1, 1.75, 2, 3],
      },
    ],
  },
  options: {
    animation: {
      duration: 0
    },
    scales: {
        xAxes: [{
          categorySpacing: 0
        }]
    },
    plugins: {
      datalabels: {
        anchor: 'center',
        align: 'center',
        color: '#666',
        font: {
          weight: 'normal',
        },
      },
      legend: {
        display: false,
      },
    },
  },
});

nav {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 65px;
    padding: 0px 20px;
    box-sizing: border-box;
    font-size: 20px;
    color: #5F6368;
    background-color: white;
    border-bottom: 1px solid lightgray}

  body {
    margin: 0;
    position: absolute;
    top: 65px; left: 0px;
    width: 100%;
    /*height: calc(100vh - 65px);*/
    background-color: #FCFCFC;
    display: grid;
    grid-template-rows: 96px minmax(120px, 1fr);
    grid-template-areas:
      "top"
      "content"}

  /* --------[TITLE FEATURE]-------- */
  #top {
    grid-area: top;
    display: flex;
    position: sticky;
    top: 65px;
    justify-content: space-between;
    align-items: center;
    margin: 0px 40px;
    font-size: 38px;
    color: #484848;
    background-color: yellow;
    border-bottom: 1px solid lightgray}

  #breadcrumb {
    color: #484848;
    font-size: 14px;
    margin: 10px 40px;}

  #breadcrumb ul {
    padding: 0;
    margin: 0;
    list-style: none;}
    #breadcrumb li {display: inline}

  #breadcrumb li:not(:last-child)::after {
    content: '▸';
    margin: 0px 10px;}

  #breadcrumb a {
    text-decoration: none;
    color: #581F98;
    font-weight: 800}

 /* --------[CHARTS]-------- */
#content {
  margin: 20px 40px 0px 40px}

#content .charts {
  display: flex;
  width: 100%;
  border-bottom: 1px solid lightgray}

.charts .DOK {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  border-right: 1px solid lightgray}

.charts .attempts {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;}

/* ------ [TOP CONTROLS] ------ */
.selector {
    background-color: pink;
    display: flex;
    align-items: center;
    padding: 20px 0px;
    position: sticky;
    top: 161px;}

.selector .title {font-weight: 800}

.selector input[type='search'] {
    flex: 1;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 6px;
    margin: 0px 20px;
    padding: 8px 20px;
    border: 1px solid black;}

.selector button {
    margin-top: -6px;
    font-size: 16px}


/* ------ [QUESTIONS] ------ */
#content .questions {
  background-color: green;
  padding: 20px;}

/* Question box style */
#content .questions section {
  min-height: 200px;
  margin-bottom: 30px; /* Space under each question */
  border: 1px solid lightgray;
  background-color: white;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;}
  #content .questions section:hover {border: 2px solid #D4BBF1;}

/* Question excerpt style */
.questions section .excerpt {
  padding-bottom: 24px; /* Space under excerpt */
  font-size: 14px;
  font-style: italic;}

/* Main question style */
.questions section .question {
  padding-bottom: 16px; /* Space under question */
  font-weight: 800;}

/* Answer choice style */
.questions section li {
  margin-bottom: 10px; /* Space under each answer option */
  list-style: none;}
  .questions section ul {margin: 0px;}

/* Spacing for checkbox in answer */
.questions section input[type='checkbox'] {margin-right: 10px;}

/* Coloring for correct answer */
.questions section li.correct {
  color: #34CB4A;
  font-weight: 800;}


  
  
  
  
  



  
     Curriculum
    
      
        Main
        Curriculum
        Assessments
        Compare/Contrast
      
    
  
  
    
      
      
    
    
      16 Saved Questions:
      
      
    
    
      
        Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.
        What does the personification of the dough suggest?
        
          to repair something.
          to replace something.
          to remove something.
          to redo something.
        
      
      
        Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.
        What does the personification of the dough suggest?
        
          to repair something.
          to replace something.
          to remove something.
          to redo something.
        
      
      
         I was a sickly, delicate boy, suffered much from asthma, and frequently had to be taken away on trips to find a place where I could breathe. One of my memories is of my father walking up and down the room with me in his arms at night when I was a very small person, and of sitting up in bed gasping, with my father and mother trying to help me. I went very little to school. I never went to the public schools, as my own children later did, both at the "Cove School" at Oyster Bay and at the "Ford School" in Washington. For a few months, I attended Professor McMullen's school in Twentieth Street near the house where I was born, but most of the time I had tutors. As I have already said, my aunt taught me when I was small.
        What does the personification of the dough suggest?
        
          to repair something.
          to replace something.
          to remove something.
          to redo something.

Run the code in full screen

Height property height: calc(100vh - 65px); in body css was affecting how position sticky works

CSS sticky property goes away past screen size

1 Answers