固定在溢出容器中的位置 - scrollToFixed

我正在嘗試使用名爲scrollToFixed的插件修復滾動上的標題，非常類似於iOS聯繫人列表。我看不到如何使標題（.learning-objective-header）固定並相對於容器。固定在溢出容器中的位置 - scrollToFixed

<div class="panel-container"> 
    <div class="title">Assessment - Year 1 - Summer Half Term</div> 
    <div class="content"> 
    <div class="nav-bar"> 
     <select><option>English 80%</option></select> 
     <button class="submit-btn">Send Assessment</button> 
    </div> 
    <div class="column-container"> 
     <div class="review-screen-wrapper"> 
     <div class="review-screen perfect-scroll"> 
      <div class="learning-objective-header"> 
      <table> 
       <thead> 
       <tr> 
        <th class="col-1 learning-objective-label">Writing</th> 
        <th class="col-2 marking-scheme-positive">I can</th> 
        <th class="col-3 marking-scheme-neutral">Nearly there</th> 
        <th class="col-4 marking-scheme-negative">I need help</th> 
       </tr> 
       </thead> 
      </table> 
      </div> 
      <div class="learning-objective-body"> 
      <table> 
       <tbody> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
      <div class="learning-objective-header"> 
      <table> 
       <thead> 
       <tr> 
        <th class="col-1 learning-objective-label">Writing</th> 
        <th class="col-2 marking-scheme-positive">I can</th> 
        <th class="col-3 marking-scheme-neutral">Nearly there</th> 
        <th class="col-4 marking-scheme-negative">I need help</th> 
       </tr> 
       </thead> 
      </table> 
      </div> 
      <div class="learning-objective-body"> 
      <table> 
       <tbody> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       <tr> 
        <td class="col-1 sub-learning-objective-label">Can I use a captial letter?</td> 
        <td class="col-2 marking-scheme-positive"><span class="marking-scheme-input"></span></td> 
        <td class="col-3 marking-scheme-neutral"><span class="marking-scheme-input"></span></td> 
        <td class="col-4 marking-scheme-negative"><span class="marking-scheme-input"></span></td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

@import "http://fonts.googleapis.com/css?family=Open+Sans:400,600,700"; 
.panel-container , 
.panel-container * { 
    box-sizing: border-box; 
} 
body { 
    background: #014783; 
    color: #fff; 
    font-family: "Open Sans"; 
} 
.panel-container { 
    background: #006bb3; 
    border: 2px solid #b5e4fe; 
    border-radius: 8px; 
    margin: 20px; 
    position: relative; 
    height: calc(100vh - 40px); 
} 
.title { 
    font-size: 22px; 
    background: #0089da; 
    padding: 15px 22px; 
    border-radius: 6px 6px 0 0; 
} 
.nav-bar { 
    text-align: left; 
} 
.submit-btn { 
    float: right; 
} 
.content { 
    padding: 22px; 
    position: relative; 
} 
.column-container:after { 
    content: " "; 
    display: table; 
    clear: both; 
} 
.review-screen-wrapper { 
    position: relative; 
    margin-top: 22px; 
    border-radius: 5px; 
    color: #444; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    table-layout: fixed; 
    width: 100%; 
} 
.review-screen { 
} 
.review-screen.perfect-scroll { 
    height: calc(100vh - 184px); 
    position: relative; 
    overflow-y: scroll; 
    border-radius: 5px; 
} 
.review-screen table th, 
.review-screen table td { 
    padding: 15px; 
    vertical-align: middle; 
    text-align: left; 
} 
.review-screen table th { 
    font-size: 18px; 
    font-weight: 600; 
    padding: 13px 15px; 
} 
.learning-objective-header ~ .learning-objective-header table th.col-1 { 
    border-top: 1px solid #CBCBCB; 
} 
.review-screen table th.col-1 { 
    background: #F5F5F5; 
    border-bottom: 1px solid #CBCBCB; 
} 
.learning-objective-header ~ .learning-objective-header table .col-1 { 
    border-top: 1px solid #E2E2E2; 
} 
.review-screen table .col-1 { 
    border-bottom: 1px solid #E2E2E2; 
} 
.learning-objective-header ~ .learning-objective-header table .col-2 { 
    border-top: 1px solid #A7CB72; 
} 
.review-screen table th.col-2 { 
    border-bottom: 1px solid #A7CB72; 
} 
.review-screen table .col-2 { 
    border-bottom: 1px solid #BAE083; 
} 
.learning-objective-header ~ .learning-objective-header table .col-3 { 
    border-top: 1px solid #E5C46D; 
} 
.review-screen table th.col-3 { 
    border-bottom: 1px solid #E5C46D; 
} 
.review-screen table .col-3 { 
    border-bottom: 1px solid #EDD9A4; 
} 
.learning-objective-header ~ .learning-objective-header table .col-4 { 
    border-top: 1px solid #F9959D; 
} 
.review-screen table th.col-4 { 
    border-bottom: 1px solid #F9959D; 
} 
.review-screen table .col-4 { 
    border-bottom: 1px solid #F7AFB5; 
} 
.review-screen table .col-2, 
.review-screen table .col-3, 
.review-screen table .col-4 { 
    width: 160px; 
    text-align: center; 
} 
.review-screen table .col-1 { 
    background: #FFF; 
} 
.review-screen table .col-2 { 
    background: #ddecd5; 
    color: #81a34f; 
} 
.review-screen table .col-3 { 
    background: #fdeec7; 
    color: #be9424; 
} 
.review-screen table .col-4 { 
    background: #fecacc; 
    color: #d16972; 
} 
.review-screen .learning-objective-body tr:last-child .col-1, 
.review-screen .learning-objective-body tr:last-child .col-2, 
.review-screen .learning-objective-body tr:last-child .col-3, 
.review-screen .learning-objective-body tr:last-child .col-4 { 
    border: 0 none; 
} 
.marking-scheme-input { 
    cursor: pointer; 
    border: 12px solid #FFF; 
    box-shadow: 0 0 0 1px rgba(1, 1, 1, 0.125); 
    border-radius: 24px; 
    display: block; 
    height: 12px; 
    width: 12px; 
    margin: auto; 
    position: relative; 
} 
.marking-scheme-input:after { 
    content: " "; 
    display: none; 
    border-radius: 10px; 
    position: absolute; 
    top: -9px; 
    left: -9px; 
    border: 9px solid currentColor; 
} 
.marking-scheme-input:not(.active):hover:after { 
    display: block; 
    opacity: 0.5; 
} 
.marking-scheme-input.active:after { 
    display: block; 
} 
.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y { 
    background-color: #343434; 
} 
.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y { 
    background-color: #343434; 
} 
.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y { 
    background-color: #343434; 
} 

$('.learning-objective-header').scrollToFixed();

http://codepen.io/2ne/pen/3bc99200b9d501c329608a153f63fde6

來源

2015-06-29 2ne

我不認爲插件提供了一種方法來處理相對固定的位置。但是，它確實可以根據屏幕頂部和底部的位置給出固定元素的絕對位置選項。所以，如果你知道在固定元件上方的區域的高度，你可以簡單地使用marginTop選項設置的位置，就像這樣：

$(document).ready(function() { 
    $('.learning-objective-header').scrollToFixed({ 
    marginTop: 137 
    }); 
});

這是在一個體改Codepen動作：http://codepen.io/pen/rVpqpz

來源

2015-06-29 18:29:50

好吧，這似乎是伎倆。它如何不將固定標題更改爲下一個標題？ http://codepen.io/2ne/pen/3e45c7c75046070b2f14546b2afe0605 – 2ne

還有一個選項可以根據頁面的高度來設置「限制」，該選項指示何時開始重新滾動固定元素。據推測，只有在那時，適當的類才能轉移到下一個元素上，這也必須有一個marginTop集。這真的不是一個非常靈活的插件。請務必參考文檔底部的所有選項：https：//github.com/bigspotteddog/ScrollToFixed。 –

我發現我需要的是在溢流容器內工作的位置粘性填充物 – 2ne

固定在溢出容器中的位置 - scrollToFixed

回答

相關問題