18

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

4

4 に答える 4

36

要素の cssposition属性をfixeduser 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 への最小限の変更で目的を達成するためのおそらく最速の方法です。次のコードをドキュメント対応関数に挿入し、以下に示すように 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 を make に変更し、および属性をmargin-top:60px削除してから追加する必要がありますpositionmargin-leftdisplay: block

理想的には、3 つのアイテムを個別に使用するのではなく、コンテナーで jquery を使用できるようiconに、 、anchor3、およびoldurlを 1 つのコンテナー内に配置します。div

しかし、これはあなたが求めているものを手に入れるはずです（FF Scratchpadを使用してライブtumblrサイトでテストされています）.

更新 (2)

Firefox を起動して次のページに移動します: http://thatoneguyoveryonder.tumblr.com/次にスクラッチパッドを開き (SHIFT + F4)、次のコードをコピーして貼り付け、CTRL + L を押します。次に、（スクラッチパッドで）次のようなことを言う必要が/* [object Object] */あります。それが発生した場合は、Webページを下にスクロールして、魔法が起こるのを見てください-これがあなたの場合は、後で実装について説明します:)

$('#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()
        })
    }
})
于 2013-07-11T22:13:38.947 に答える
5

使用できます

position:fixed

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

于 2013-07-11T22:10:23.963 に答える
3

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

于 2013-07-11T22:17:14.190 に答える