2016-07-11 38 views
0

This is my code on github我需要有關表格的首行幫助被粘

這是我用什麼來讓它粘

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
這是我使用的JavaScript

我的HTML代碼
<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 > 
+0

爲什麼你不只是使用'位置:sticky'? – gcampbell

+0

在哪裏使用位置:粘? –

+1

實際上這可能不是一個好主意,除非你想使用polyfill。 – gcampbell

回答

0

下面的例子可能會幫助你,如果你只想使用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:

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

這個例子是不工作,它不使我的菜單粘滯是的,但我想我的橙色行是像那樣只有 –

+0

我不知道爲什麼不去jquery。這也是輕量級 –

+0

因爲我被要求不使用jQuery早些時候我只使用 –