私はスティッキー

Question

This is my code on github

これは、私はこれは私がjavascriptの

を使用しています私のhtmlコードであることべたつき

var h = document.getElementById("sticky_menu"); 

var stuck = false; 
var stickPoint = getDistance(); 

function getDistance() { 
    var topDist = h.offsetTop; 
    return topDist; 
} 

window.onscroll = function(e) { 
    var distance = getDistance() - window.pageYOffset; 
    var offset = window.pageYOffset; 
    if ((distance <= 0) && !stuck) { 
    h.style.position = 'fixed'; 
    h.style.top = '0px'; 
     h.style.paddings ='1px'; 
     h.style.margins='1px'; 
    stuck = true; 
    } else if (stuck && (offset <= stickPoint)){ 
    h.style.position = 'static'; 
    stuck = false; 
    } 
} 

This is what I get after scrolling
作るために使用するものであることを表の一番上の行についてのヘルプが必要です

<tr id="sticky_menu" class="comparison" > 
     <th width="24%" class="tl tl2"></th> 
     <th width="19%" class="product" style="background:#f96e5b; border-top-left-radius: 5px; border-left:0px;">Exchange Online Plan 1</th> 
     <th width="19%" class="product" style="background:#f96e5b;">Office 365 Business Essential </th> 
     <th width="19%" class="product" style="background:#f96e5b;">Office 365 &nbsp; &nbsp; Business &nbsp; </th> 
     <th width="19%" class="product" style="border-top-right-radius: 5px; border-right:0px; background:#f96e5b;">Office 365 Business Premium</th> 
     </tr> 
     <tr > 

Answer 1

以下の例は、CSSのみを使用したい場合に役立ちます。

JSFiddle

Second Example

HTML：

<section class=""> 
    <div class="container"> 
    <table> 
     <thead> 
     <tr class="header"> 
      <th> 
      Exchange Online Plan 1 
      <div>Exchange Online Plan 1</div> 
      </th> 
      <th> 
      Office 365 Business Essential 
      <div>Office 365 Business Essential</div> 
      </th> 
      <th> 
      Office 365 &nbsp; &nbsp; Business &nbsp; 
      <div>Office 365 &nbsp; &nbsp; Business &nbsp; </div> 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>align</td> 
      <td>left, center, right</td> 
      <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td> 
     </tr> 
     <tr> 
      <td>bgcolor</td> 
      <td>rgb(x,x,x), #xxxxxx, colorname</td> 
      <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td> 
     </tr> 
     <tr> 
      <td>border</td> 
      <td>1,""</td> 
      <td>Specifies whether the table cells should have borders or not</td> 
     </tr> 
     <tr> 
      <td>cellpadding</td> 
      <td>pixels</td> 
      <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td> 
     </tr> 
     <tr> 
      <td>cellspacing</td> 
      <td>pixels</td> 
      <td>Not supported in HTML5. Specifies the space between cells</td> 
     </tr> 
     <tr> 
      <td>frame</td> 
      <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td> 
      <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td> 
     </tr> 
     <tr> 
      <td>rules</td> 
      <td>none, groups, rows, cols, all</td> 
      <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td> 
     </tr> 
     <tr> 
      <td>summary</td> 
      <td>text</td> 
      <td>Not supported in HTML5. Specifies a summary of the content of a table</td> 
     </tr> 
     <tr> 
      <td>width</td> 
      <td>pixels, %</td> 
      <td>Not supported in HTML5. Specifies the width of a table</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</section> 

CSS：sticky`：あなただけの `位置を使用していないのはなぜ

html, body{ 
    margin:0; 
    padding:0; 
    height:100%; 
} 
section { 
    position: relative; 
    border: 1px solid #000; 
    padding-top: 37px; 
    background: #500; 
    width:100%; 
} 
section.positioned { 
    position: absolute; 
    top:100px; 
    left:100px; 
    width:800px; 
    box-shadow: 0 0 15px #333; 
} 
.container { 
    overflow-y: auto; 
    height: 200px; 
} 
table { 
    border-spacing: 0; 
    width:100%; 
} 
td + td { 
    border-left:1px solid #eee; 
} 
td, th { 
    border-bottom:1px solid #eee; 
    background: #ddd; 
    color: #000; 
    padding: 10px 25px; 
} 
th { 
    height: 0; 
    line-height: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
    color: transparent; 
    border: none; 
    white-space: nowrap; 
} 
th div{ 
    position: absolute; 
    background: transparent; 
    color: #fff; 
    padding: 9px 25px; 
    top: 0; 
    margin-left: -25px; 
    line-height: normal; 
    border-left: 1px solid #800; 
} 
th:first-child div{ 
    border: none; 
}