web-dev-qa-db-ja.com

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

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

htmlcsstumblr
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を追加します

理想的には、icon、anchor3、および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