webdevqa.jp.net

ウィンドウを基準とした位置

Tumblrアカウントを持っていますが、そのhtmlの編集に取り組んでいます。私の質問はこれです:サイドバーを特定の位置にするにはどうすればよいのですか?その後、ページを下にスクロールすると、ブラウザーに対して相対的な場所にとどまりますか?私が話していることの例については、「質問する」をクリックし、「類似の質問」を見てスクロールしてください。私はそれがCSSにあることを望みます。思いつく限りのことはすべて試しました。

12
judh1234

要素css position属性をfixedに設定し、ユーザーtop/leftおよびmarginを希望する場所に配置します。そのようです:

#sideBar {
    position: fixed;
    display: block;
    top: 50%;
    left: 10px;
    margin: -100px 0 0 0;
    height: 200px;
    width: 50px;
}

上記のコードは、200pxの高いdivを垂直方向に中央揃えし、左側の境界線から10pxに配置します。

[〜#〜]更新[〜#〜]

この例では、目的を達成する方法を示します。 jqueryを使用したデモ

更新(1)

次のjqueryコードは、他のhtml/cssに最小限の変更を加えるだけで、望みどおりの結果を得る最も速い方法です。次のコードをdocument ready関数に貼り付け、CSSの数ビットを以下のように変更します。

$(window).scroll(function(){
    if($(window).scrollTop() >= 200){
        $('anchor3').css({
            "margin-top": "80px"
        })
        $('icon').css({
            "margin-top": "10px"
        })
        $('oldurl').css({
            "margin-top": "296px"
        })
    }
    else{
        $('anchor3').css({
            "margin-top": 300 - $(window).scrollTop()
        })
        $('icon').css({
            "margin-top": 230 - $(window).scrollTop()
        })
        $('oldurl').css({
            "margin-top": 516 - $(window).scrollTop()
        })
    }    
})

a3textのCSSを変更してmargin-top:60pxを作成し、positionおよびmargin-left属性を削除する必要があります。次にdisplay: blockを追加します

理想的には、iconanchor3、およびoldurlを1つのコンテナーdiv内に置くだけで、3つのアイテムではなくコンテナーでjqueryを使用できます。個別に!

しかし、これはあなたが何をしているのかをあなたに知らせるはずです(FF Scratchpadを使ったライブtumblrサイトでテスト済み)。

UPDATE(2)

Firefoxを起動して、ページに移動します。 http://thatoneguyoveryonder.tumblr.com/ 次に、スクラッチパッド(SHIFT + F4)を開き、次のコードをコピーして貼り付け、CTRL + Lを押します。次に、スクラッチパッドで/* [object Object] */のようなメッセージが表示されるはずです。その場合は、ウェブページを下にスクロールして、魔法が起こるのを観察してください-これがあなたの場合、実装について説明します:)

$('#sidebar').css({
    position:'fixed',
    top:410,
    left:700 + 60 + (($(window).width()-940) / 2),
    "z-index":900
});

$(window).scroll(function(){
    if($(window).scrollTop() >= 370){
        $('#sidebar').css({
            top: '30px'
        })
    }
    else{
        $('#sidebar').css({
            top: 410 - $(window).scrollTop()
        })
    }
})
26
Steven

使用できます

position:fixed

これは、同じ http://jsfiddle.net/aBaNM/ のjsfiddleです。本文をスクロールしても、赤いdivがそこに配置されているはずです。

4
sublime

私は同意します、position:fixedにtop:0pxとleft:0pxを使用する必要があります。ただし、ナビゲーションに固定位置を使用する場合は注意してください。ユーザーの画面がメニューよりも小さい場合、オーバーフローが表示されることはありません。

2
TorranceScott