タグ付けされた質問 「fixed」

私は修正しようとしていますdivので、それは常に画面の上部にくっつきます： position: fixed; top: 0px; right: 0px; ただし、はdiv中央のコンテナ内にあります。使用するposition:fixedとdiv、ブラウザウィンドウの相対位置が修正されます。たとえば、ブラウザの右側に当たるようになります。代わりに、コンテナに対して相対的に修正する必要があります。 をposition:absolute基準にして要素を修正するために使用できることはわかっていますがdiv、ページを下にスクロールすると、要素は消失し、のように上部に固定されませんposition:fixed。 これを達成するためのハックまたは回避策はありますか？

639 css  position  css-position  fixed 

スティッキーサイドバーの問題の解決策を探していました。私はそれをどのように行動させたいかについて具体的な考えを持っています。事実上、下にスクロールすると下にくっつき、上にスクロールするとすぐに上にくっつき、滑らかな動き（ジャンプなし）になります。私が達成しようとしていることの例を見つけることができないので、私はポイントをより明確に説明することを望む画像を作成しました： サイドバーはヘッダーの下にあります。 下にスクロールしても、サイドバーはページのコンテンツと同じ高さのままなので、サイドバーとコンテンツの両方をスクロールできます。 サイドバーの下部に到達すると、サイドバーはビューポートの下部に固定されます（ほとんどのプラグインは上部にのみ固定できますが、下部に固定できるプラグインの中には両方を使用できないものもあります）。 下部に到達すると、サイドバーはフッターの上に配置されます。 上にスクロールしても、サイドバーはコンテンツと同じ高さに保たれるため、コンテンツとサイドバーをもう一度スクロールできます。 サイドバーの上部に到達すると、サイドバーはビューポートの上部に固定されます。 上部に到達すると、サイドバーがヘッダーの下に戻ります。 これで十分な情報になるといいのですが。プラグイン/スクリプトをテストするためにjsfiddleを作成しましたが、この質問のためにリセットしました：http：//jsfiddle.net/jslucas/yr9gV/2/ .

94 jquery  position  fixed  sidebar  sticky 

次のスニペット（全画面モードで表示する必要があります）があり、<main>要素のすぐ下に<header>要素を配置しようとしています。私が持っている<header>、私はそれがでコンテンツをスクロールなどの画面の上部に滞在したいので、固定位置での<main>要素。私は知っているすべてのことを試しましたが、思いつくことができる最善の方法は、<header>要素を要素の上に配置して<main>、コンテンツの大きなチャンクを切り取ることです。 私が思いついた最も近い可能な解決策は、推定された上部パディングを<main>要素に置くこと<header>です。ただし、pxではなくrem sizingを使用しているため、このソリューションはさまざまな画面サイズを十分に考慮していません。<header>相対またはパーセンテージベースの高さを使用する内にいくつかの要素を配置すると、上部パディングのアイデアはさらに悪化します。ある画面サイズではすべてが完璧に並ぶ場合があり、別の画面サイズではコンテンツが途切れる場合があります。 最後に、jQueryを使用して動的に上部のパディングを設定できることはわかっていますが、常にうまく機能するとは限りません。純粋なcss / htmlソリューションがあるのだろうか。 私がここで欠けているものを誰かに教えてもらえますか？私のトップパディング方法が唯一の実行可能なソリューションですか？ $(document).ready(function() { $('#navToggle').click(function() { $("div#bottom-container > nav").slideToggle(); }); $(window).resize(function() { if(window.innerWidth >= "751") { $("header > div#bottom-container > nav").show(); }else { $("header > div#bottom-container > nav").hide(); } }); $("header > div#bottom-container > nav > ul > li > a").click(function(e) { if (window.innerWidth <= …

15 html  css  css-position  fixed