web-dev-qa-db-ja.com

固定位置divを取得して、コンテンツとともに水平にスクロールするにはどうすればよいですか？ jQueryを使用する

私は次のCSSでdiv.scroll_fixedを持っています

.scroll_fixed {
    position:absolute
    top:210px

}
.scroll_fixed.fixed {
    position:fixed;
    top:0;
}

次のjQueryコードを使用して、divがページの上部に到達したときに.fixedクラスを設定しています。

var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));

$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }
});

これは、垂直スクロールの修正に最適です。ただし、ブラウザウィンドウが小さい場合、水平スクロールにより、この固定divの右側のコンテンツと衝突します。

Divでコンテンツを水平にスクロールさせたいです。

誰でも私を正しい方向に向けることができますか？まだJS/JQueryで足が濡れています。

基本的に、この 例 の2番目のボックスのように動作するようにします。

jquerycssfixed
31
jfeust

デモでは、要素のposition:fixedおよび要素のleftプロパティの操作：

var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));


$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});

leftInitを使用すると、可能な左マージンが考慮されます。ここで試してみてください： http://jsfiddle.net/F7Bme/

23
Andrew Whitaker

あなたはおそらく今までに動いたかもしれませんが、水平スクロール可能な固定要素ソリューションを探している他の人への答えはここにあります。このjqueryプラグインは、この正確な問題を解決するために作成されました。

このデモでは、ショッピングカートの概要を使用します。この概要は、ページの上部に固定されると水平にスクロールします。また、表形式データの上のヘッダーにも使用しました。

デモ： http://jsfiddle.net/y3qV5/434/ （更新済み）

プラグインとソース： https://github.com/bigspotteddog/ScrollToFixed

使用法：

$(document).ready(function() {
    $('#cart').scrollToFixed( { marginTop: 10 } );
});
21
bigspotteddog

cssプロパティを使用position:stickyを取得します。

こちらが記事とライブデモです。

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

唯一の欠点はブラウザの互換性です。

8
Konga Raju