修復絕對定位元素到視口頂部的滾動

Question

我試圖結合兩個世界的最佳，並完成什麼固定定位時，當你設置top: 0（附加到視口的頂部），同時保持元素絕對定位，使它滾動水平地與其父元素（這與固定這是有問題的）。

趕上這是一個表頭，所以試圖破解我的方式通過嵌套divs設置爲不同的定位方法將無法在這裏工作。

我目前嘗試是保持表頭用的absolute的位置而計算所述表的頂部的距離視口的頂端的滾動事件偵聽器內：

const distanceToTop = this.headerElement.getBoundingClientRect().top; 
this.stickyHeaderElement.style.top = `${Math.abs(distanceToTop)}px`; 

this.headerElement是原始表格標題，您可以滾動過去（不執行任何操作），而stickyHeader實例是發生冒煙的鏡像的位置。

這個電流的方法是做我想要的它... 然而，當你滾過原始表頭和粘實例附加是令人難以置信的，因爲哈克，粘頭搖因爲所有的DOM操作發生的每事件監聽器觸發的時間。

因爲它是用上面的邏輯重新計算的。

問：我可以有一個絕對定位的表頭元素也添加到視象固定定位允許的頂部？那裏有更高效的解決方案嗎？

Answer 1

這是你要什麼？

let fixed = document.getElementById('fixed'); 
 

 
window.addEventListener("scroll", e => window.requestAnimationFrame(() => { 
 
    fixed.style.marginLeft = -1 * window.scrollX + "px"; 
 
}));

#fixed { 
 
    position: fixed; 
 
    background-color: white; 
 
} 
 

 
#unfixed { 
 
    color: white; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/> 
 
<div> 
 
    <table> 
 
    <thead> 
 
     <tr id="fixed"> 
 
     <td>foo</td> 
 
     <td>bar</td> 
 
     <td>baz</td> 
 
     <td>fibble</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>ffft</td> 
 
     </tr>  
 
     <tr id="unfixed"> 
 
     <td>foo</td> 
 
     <td>bar</td> 
 
     <td>baz</td> 
 
     <td>fibble</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>meow</td> 
 
     <td>ffft</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

Answer 2

使用位置：固定時，粘滯標頭很簡單。

#header_container { 
 
    background: green; 
 
    height: 60px; 
 
    left: 0; 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
} 
 

 
#header { 
 
    line-height: 60px; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
#container { 
 
    margin: 0 auto; 
 
    overflow: auto; 
 
    padding: 80px 0; 
 
    width: 100%; 
 
} 
 

 
#content { 
 
    height: 500px; 
 
}

<div id="header_container"> 
 
    <div id="header"> 
 
    Header Content 
 
    </div> 
 
</div> 
 

 
<div id="container"> 
 
    <div id="content"> 
 
    Content Here 
 
    </div> 
 
</div>