スティッキーヘッダーの作成方法については、オンラインでかなりの記事を見ることができます（つまり、ユーザーがページをスクロールすると、ヘッダーはウィンドウの上部に配置されます）。しかし、彼らはすべてヘッダーが固定された高さでなければならないことを暗示しているようです。ヘッダーが不明なときのスティッキーヘッダーの高さ
これは私には受け入れられません。非常に単純な例として、7月4日のような特定の日付では、ヘッダにUSフラグを付けることができます。これにより、高さがわずかに増加します。
divの高さに関係なく、<div class="header"> ... </div>領域に含まれるすべての情報をスティッキーにするにはどうすればよいですか？
これにはjqueryを使用する必要があります。 jqueryはヘッダーの高さを動的に取得し、パディングトップを聞いたdivに囲みます。例えば
HTML
<html>
<head>test</head>
<body>
<header>
<div class="example"> Test</div>
</header>
<div class="sample-content">
Test Content Test Content Test Content Test Content Test Content
</div>
CSS
header{width:100%; position:fixed;}
jQueryの
<script>
$(window).load(function(){
// this gets dynamic height of your header
var sticky_header = $('header').height();
// apply tha dynamic height to your div after header for margin-top so it not covered by sticky header
$('.sample-content').css('margin-top', sticky_header + 'px');
});
</script>
パーティーに遅れて申し訳ありませんが、これはJavascriptを一切使わずに行うことができます。これは審美的に不愉快なことかもしれませんが、神と人に対する犯行ですが、うまくいきます！その後、いくつかのCSS提供
<div id="fbanner">Here's your banner content</div>
<div id="banner">Here's your banner content</div>
<div id="restofpage">Here's the stuff on the rest of your page</div>
：トリックは2人のdivの中で正確に同じ内容を置くことです
#fbanner {
position: fixed;
width: 100%;
}
#banner {
visibility: hidden;
}
そうに、どんなに内容が、それはテキストが中にその行ラップだ場合でも、何ですか狭いビューポートで、両方のdivの高さが同じになり、スクロールするまで、ページコンテンツの残りの部分がバナーの下に消えないように、隠されたスペースが必要となります。
マージンを変更する必要があるかもしれませんが、もう1つのjQueryの "解決策"を避けたい場合には、お金を払うのに費用がかかります。
これは本当に賢いです。 –
私は固定ピクセルの高さではないヘッダーを持っています。他の部門がコンテンツ管理システムのバナーに入れることにしたがって、ヘッダーの高さが変わります。
だから私は、@MisterNeutron答えが提案して（見えない）第二ヘッダを作成したが、私のヘッダーはかなり大規模なので、代わりに私はJavaScriptを使用してヘッダーDOM要素のクローンを作成し、HTMLを複製するのであるのと同様でした。
var visibleHeader = document.querySelector('.fixed-top').cloneNode(true);
var invisibleHeader = document.querySelector('.fixed-top');
invisibleHeader.style.visibility = 'hidden';//take up space, but be hidden.
invisibleHeader.style.position = 'relative';//un-fix
document.querySelector('body').insertBefore(visibleHeader, invisibleHeader);
HTMLはこのように見える終わるので、それは自己のヘッダには、体内に直接です：あなたは、ヘッダー内のIDの持つすべての要素を持っている場合、これが作成されること
<body> <div class="fixed-top"> ... rest of header html ... </div> <div class="fixed-top" style="visibility: hidden; position: relative;"> ... rest of header html ... </div> ... rest of page goes here ... </body>
注意2と同じIDを持つ要素がありますが、Realヘッダーが上であることを確認した場合は、それを照会するときに常に希望のヘッダーを取得します。
JavaScript、マイフレンド –
あなたは間違った考えを持っています。 'position：fixed'はヘッダーを粘着にし、動的' height'で動作します –
マリアン、ポスターは正しいアイデアを持っています。あなたは位置を決めることができます：ヘッダーに固定されていますが、ヘッダーの下にあるものにパディングトップを与えるためにヘッダーの高さを知る必要があります。そうでなければヘッダーで覆われます。 – jas7457