固定配置要素の「スクロール」と「ズーム」イベントの処理方法は？

Question

右上隅のビューポートで修正したい固定配置の要素があります。

これはHTMLです：

<div class = "header"> 
<p>This is a heading with an absolute position</p> 
</div> 

とCSS：

.header { 
position: absolute; 
right:10px; 
top: 10px; 
} 

必要に応じて、あなたがラップトップで右にスクロールまたはモバイルデバイスでズームまで、それは動作します。これらの2つのイベントは、イベントの程度に応じて要素を左にシフトします。

1：100％と幅の一番上にあるのdivコンテナを作成し、コンテナに対する元素を作る

は、私は2つのソリューションを思い付きました。二つの事象 scrollと touchendを聞いイベントリスナーを追加します。 これは、私は、ウィンドウをスクロールすると、コンテナはそれに応じて

2を拡張しないように失敗しました。

$(window).scroll(function(){ 
$(".header").css({"right": "10px", "top": "10px"}); 
}); 

$(document.body).bind("touchend", function(){ 
    $(".header").css({"right": "10px", "top": "10px"}); 
}); 

は、私はすべての選択したイベントの要素を更新し、ビューポートに常に同じ位置にそれを作りたかったのですが、この方法はあまりにも失敗しました。 CSSのように、元のビューポートに従って要素を配置するようです。

シンプルで効率的な解決策はありますか？

Answer 1

あなたは固定位置を使用し、ビューポートに何かを固定しようとしている場合：

position: fixed;