Как мне получить фиксированную позицию div для горизонтальной прокрутки содержимого? Использование jQuery - PullRequest
Новая
       15

Как мне получить фиксированную позицию div для горизонтальной прокрутки содержимого? Использование jQuery

31 голосов
/ 13 января 2011

У меня есть div.scroll_fixed со следующим CSS 

.scroll_fixed {
    position:absolute
    top:210px

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

Я использую следующий код jQuery для установки класса .fixed, когда div достигает верхней части страницы. 

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.

Я просто хочу, чтобы он работал как вторая коробка в этом примере .

Ответы [ 3 ]

23 голосов
/ 13 января 2011

Демо-версия сохраняет элемент 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/

21 голосов
/ 30 августа 2011

Вы, вероятно, уже продвинулись, но здесь есть ответ для любого, кто ищет решение с фиксированной горизонтальной прокруткой. Этот плагин JQuery был создан, чтобы решить эту проблему.

В этой демонстрации используется сводная информация о корзине, которая будет по-прежнему прокручиваться по горизонтали, если зафиксирована в верхней части страницы; и я также использовал его для заголовка над табличными данными:

Демо: http://jsfiddle.net/y3qV5/434/ (обновлено)

Плагин и источник: https://github.com/bigspotteddog/ScrollToFixed

Использование: 

$(document).ready(function() {
    $('#cart').scrollToFixed( { marginTop: 10 } );
});
8 голосов
/ 14 сентября 2012

используйте свойство css position:sticky, чтобы получить его.

Вот объяснение статьи и живая демонстрация.

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

единственный недостатоксовместимость с браузером.

...