スクロールでビューポイントの最上部に絶対配置された要素を固定する

top: 0（ビューポートの最上部に追加）を設定したときに、固定された配置が何を達成しようとしているのですか？親要素と水平に（固定でこれを行うことは問題です）。スクロールでビューポイントの最上部に絶対配置された要素を固定する

これはテーブルヘッダーなので、入れ子にしてこの方法でハッキングしようとすると、異なる位置付け方法に設定されたdivsはここでは機能しません。

私は現在スクロールイベントリスナー内のビューポートの上部からテーブルの上面の距離を計算しながらabsoluteの位置でテーブルヘッダを維持した試み：

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

this.headerElementでありますstickyHeaderインスタンスがスモーク&ミラーが発生している間にスクロールして（何もしない）スクロールできる元のテーブルヘッダー。

この現行の方法は、私はそれが何をしたいやっている... あなたは、元のテーブルヘッダを過ぎてスクロールして粘着性のインスタンスを追加して、粘着性のヘッダはすべての出来事により、すべてのDOM操作に揺れるのでしかし、それは非常にハックですイベントリスナーが起動する時刻。

これは上記のロジックで再計算されているためです。

質問：絶対配置されたテーブルヘッダ要素を、固定配置のようにビューポートの上部に追加することはできますか？そこにはより効率的なソリューションがありますか？

出典

2017-07-06 Jose

私は、あなたが探している単語は "**スティッキー**" であると信じています。すでにたくさんの例と解決策があります。ただそれを探してください:) – Terry

探しているものが分かっていれば、要素の.topが一番上になると 'position：fixed'を追加することができますビューポート（またはエフェクトをトリガーする場所）を指定します。 – ingridly

@ingridlyええ、問題は、位置が固定に設定されていて、水平方向にスクロールすると、追加されたテーブルヘッダーが残りのコンテンツとスクロールしないということです。絶対配置**では、テーブルヘッダーをコンテンツと水平方向にスクロールできます。トリッキーな状況。 – Jose

あなたが行っている何本か？

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>

出典

2017-07-07 18:32:34 Will

あなたは今日インターネットに勝ちます。 – Jose

スティッキーヘッダーは、「位置：固定」を使用すると簡単です。

#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>

出典

2017-07-06 23:11:33

それはそれほど簡単ではありません。あなたが私の質問を読んでいれば、ビューポートの上部に要素を追加するだけではありません。それだけで十分です。問題はその動作を維持することです** **他の**テーブルと一緒にヘッダースクロール**を水平に** **持っている**。「固定」のポジションをとっているものは、あなたに任せません。 – Jose

スクロールでビューポイントの最上部に絶対配置された要素を固定する

答えて

関連する問題