CSS粘性屬性消失超過螢屏大小-有解無憂

我正在開發一個應用程式，但遇到了一些 CSS 樣式問題。我正在與之抗爭position: sticky，卻發現自己被困在一個不知道如何逃脫的洞中。

我想要的最終結果是有一個可滾動的頁面，但我希望<nav>（白色背景）、<div id='top'>（黃色背景）和<div class='selector'>（粉色背景）在用戶滾動頁面時在頂部“粘性”（視覺表示想要的結果）。

圖表的大小將保持不變，但問題串列的長度將是不確定的。當用戶滾動問題串列時，我希望他們始終可以輕松訪問搜索欄和面包屑標題。

我究竟做錯了什么？？現在黃色部分在某個點之前按預期運行，然后它隨機決定滾動并忽略粘性。（我什至不知道從哪里開始粉紅色部分，尤其是因為我無法弄清楚第一部分！）

任何幫助和解釋將不勝感激，以幫助我為未來學習。

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;}

<head>
  <link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
  <nav></nav>
</head>

<body>
  <div id='top'>
    <div class='title'>?? Curriculum</div>
    <div id='breadcrumb'>
      <ul>
        <li><a href='?'>Main</a></li>
        <li><a href='?view=attendance'>Curriculum</a></li>
        <li><a href='?view=attendance'>Assessments</a></li>
        <li>Compare/Contrast</li>
      </ul>
    </div>
  </div>
  <div id='content'>
    <div class='charts'>
      <div class='DOK'><canvas id="dokChart"></canvas></div>
      <div class='attempts'><canvas id="attemptsChart"></canvas></div>
    </div>
    <div class='selector'>
      <div class='title'>16 Saved Questions:</div>
      <input type='search' placeholder='Search question bank...'>
      <button class='button purple-btn'>Create Question</button>
    </div>
    <div class='questions'>
      <section>
        <div class='excerpt'>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.</div>
        <div class='question'>What does the personification of the dough suggest?</div>
        <ul>
          <li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
          <li><label><input type='checkbox' disabled>to replace something.</label></li>
          <li><label><input type='checkbox' disabled>to remove something.</label></li>
          <li><label><input type='checkbox' disabled>to redo something.</label></li>
        </ul>
      </section>
      <section>
        <div class='excerpt'>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.</div>
        <div class='question'>What does the personification of the dough suggest?</div>
        <ul>
          <li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
          <li><label><input type='checkbox' disabled>to replace something.</label></li>
          <li><label><input type='checkbox' disabled>to remove something.</label></li>
          <li><label><input type='checkbox' disabled>to redo something.</label></li>
        </ul>
      </section>
      <section>
        <div class='excerpt'> 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.</div>
        <div class='question'>What does the personification of the dough suggest?</div>
        <ul>
          <li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
          <li><label><input type='checkbox' disabled>to replace something.</label></li>
          <li><label><input type='checkbox' disabled>to remove something.</label></li>
          <li><label><input type='checkbox' disabled>to redo something.</label></li>
        </ul>
      </section>
    </div>
  </div>
</body>

uj5u.com熱心網友回復：

是的，您正在尋找的功能是通過 position:sticky 完成的。要使此屬性起作用，需要以下內容：應用位置：粘性和屬性頂部、左側、右側、底部和粗糙。我留下了效果的代碼以便更好地理解：

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

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


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position styck</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>
<body class="container">

    <div class="bg-warning p-4 mt-3 styck_1">
        <h1>Text 1</h1>
    </div>

   <p> 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. </p>
   <p> 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. </p>
   <p> 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. </p>
   <p> 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. </p>

    <div class="bg-primary p-4 styck_2">
        <h1>Text 2</h1>
    </div>


   <p> 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. </p>
   <p> 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. </p>
   <p> 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. </p>
   <p> 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. </p>


    <div class="bg-success p-4 styck_3">
        <h1>Text 2</h1>
    </div>

   <p> 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. </p>
   <p> 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. </p>
   <p> 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. </p>
   <p> 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. </p>
   <p> 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. </p>
   <p> 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. </p>
   <p> 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. </p>
   <p> 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. </p>
</body>
</html>

現在讓我們修復 html 中的問題。您的 html 中有一個屬性會導致沖突。這里是代碼，然后是解釋。

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;}

<head>
  <link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
  <nav></nav>
</head>

<body>
  <div id='top'>
    <div class='title'>?? Curriculum</div>
    <div id='breadcrumb'>
      <ul>
        <li><a href='?'>Main</a></li>
        <li><a href='?view=attendance'>Curriculum</a></li>
        <li><a href='?view=attendance'>Assessments</a></li>
        <li>Compare/Contrast</li>
      </ul>
    </div>
  </div>
  <div id='content'>
    <div class='charts'>
      <div class='DOK'><canvas id="dokChart"></canvas></div>
      <div class='attempts'><canvas id="attemptsChart"></canvas></div>
    </div>
    <div class='selector'>
      <div class='title'>16 Saved Questions:</div>
      <input type='search' placeholder='Search question bank...'>
      <button class='button purple-btn'>Create Question</button>
    </div>
    <div class='questions'>
      <section>
        <div class='excerpt'>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.</div>
        <div class='question'>What does the personification of the dough suggest?</div>
        <ul>
          <li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
          <li><label><input type='checkbox' disabled>to replace something.</label></li>
          <li><label><input type='checkbox' disabled>to remove something.</label></li>
          <li><label><input type='checkbox' disabled>to redo something.</label></li>
        </ul>
      </section>
      <section>
        <div class='excerpt'>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.</div>
        <div class='question'>What does the personification of the dough suggest?</div>
        <ul>
          <li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
          <li><label><input type='checkbox' disabled>to replace something.</label></li>
          <li><label><input type='checkbox' disabled>to remove something.</label></li>
          <li><label><input type='checkbox' disabled>to redo something.</label></li>
        </ul>
      </section>
      <section>
        <div class='excerpt'> 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.</div>
        <div class='question'>What does the personification of the dough suggest?</div>
        <ul>
          <li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
          <li><label><input type='checkbox' disabled>to replace something.</label></li>
          <li><label><input type='checkbox' disabled>to remove something.</label></li>
          <li><label><input type='checkbox' disabled>to redo something.</label></li>
        </ul>
      </section>
    </div>
  </div>
</body>

全屏運行代碼

height: calc(100vh - 65px);body css 中的高度屬性影響位置粘性的作業方式

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/379684.html

標籤：css

上一篇：檢查表格視圖單元格完全可見

下一篇：垂直滾動在螢屏大小下不起作用