2

フィドル： http： //jsfiddle.net/EzuTT/

CSS

#bottomfadebar {
    position:fixed;
    z-index: 2; 
    bottom: 0px;
    width:267px;
    height:84px;
    background-color:#666;
}
#content{
    width:2000px;
    background-color:#ccc;
}

HTML

<div id="content">
    This is all of the data. Theres lots of it.  so the user will have to scroll horizontally.  the bottom bar should go out of view as you scroll further to the right because there's so much data.  the bottom bar should only stay "fixed" to the bottom, not to the left hand corner.
</div>

<div id="bottomfadebar">
    THIS SHOULD SCROLL HORIZONALLY AS THE PAGE DOES
</div>

最終的に、右にスクロールしてコンテンツdivをさらに表示すると、＃bottomfadebardivは左下隅に留まり続けます。ボトムフェードバーDIVを画面の左側にスクロールできるようにする方法を見つけようとしていますが、現在のようにウィンドウの下部で修正しています。

- - - 編集！！！

わかりました。簡単に説明できると思ったので、ちょっと吹き飛ばしましたが、絶対的な要素が入ってくることに気づきました。実際には、中央に配置されたNAVdiv内にあるはずです。

http://jsfiddle.net/u5GuG/4/

「コンテナ」領域内の絶対左：0に固執する必要があります....指定する必要があります、お詫び申し上げます。それを行う方法がわからない。

4

4 に答える 4

1

よろしければ、そのために少しjQueryを使用します;）

$(window).scroll(function() {
    $("#bottomfadebar").css("left", (-1 * $(window).scrollLeft()) + "px");
});

フィドル： http： //jsfiddle.net/inti/Gqpmf/

更新：今、私はそれを理解したと思い#bottomfadebarます。ページをスクロールしている間、画面の下部に沿ってスクロールする必要があります。

$(window).scroll(function() {
    var window_width = $(window).width(),
        window_scrollleft = $(window).scrollLeft(),
        content_width = $("#content").width(),
        bottomfadebar_width = $("#bottomfadebar").width(),

        content_path = content_width - window_width,
        bottomfadebar_path = window_width - bottomfadebar_width,
        bottomfadebar_left = 0;

//  Equations:
//  content_pos = window_scrollleft / content_path;
//  bottomfadebar_pos = bottomfadebar_left / bottomfadebar_path;
//  content_pos = bottomfadebar_pos;

    bottomfadebar_left = window_scrollleft / content_path * bottomfadebar_path;

    $("#bottomfadebar").css("left", bottomfadebar_left + "px");
});

フィドル： http： //jsfiddle.net/inti/Gqpmf/2/

更新2：まだわからないと思いますが、画面の位置に固定したい場合[bottom,center]は、このcssを使用してください。

#object {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 200px;
    margin-left: -100px; /* half of the width in negative */
}

フィドル： http： //jsfiddle.net/inti/Gqpmf/3/

更新3：本当に私の最後の推測。アイテムを別の要素内で相対的に絶対配置する場合は、コンテナ要素の位置を相対（または絶対）に設定する必要があります。

#container {
    position: realtive;
}
#object { /* inside #container */
    position: absolute;
    left: 0; /* will stick to the left side of #container */
    bottom: 0; /* will stick to the bottom side of #container */
}
于 2013-03-15T23:09:00.927 に答える
0

Fiddleのコードを変更しました。

コンテンツ内に移動bottomfadebarし、コンテンツの高さを100％に変更しbottomfadebar、絶対値に変更しました

http://jsfiddle.net/EzuTT/1/-それはあなたが探しているものですか？

于 2013-03-15T23:07:04.893 に答える
0

ボトムフェードバーの位置を「絶対」に切り替えるだけです。すでに「bottom：0」が設定されているため、ページの下部に固定されます。絶対位置の要素はデフォルトで「left：0」に設定されるため、水平方向にスクロールしても表示されたままになりません（IEの古いバージョン（7以下）で「left：0」を宣言する必要がある場合を除きます）。 ;'奇妙なレンダリングを避けるため。

于 2013-03-15T23:19:27.940 に答える
0

固定位置を使用する代わりに、absoluteを使用し、左属性と下属性を0に設定します。これにより、ブラウザビューポートの左下ではなく、ページの左下にdivが配置されます。

#bottomfadebar {
position:absolute;
z-index: 2; 
left: 0;
bottom: 0;
width:267px;
height:84px;
    background-color:#666;
}

フィドルはここにあります：http：//jsfiddle.net/u5GuG/3/

于 2013-03-15T23:28:11.977 に答える