Возможно ли это без использования javascript?

Я создал простой веб-интерфейс с JSFiddle, и мне интересно, можно ли сделать тот же пользовательский интерфейс без использования JavaScript.

Fiddle говорит более 1000 слов.

Итак, вопрос (потому что для некоторых людей это кажется неясным): Как я могу достичь тех же результатов без использования JavaScript?

PS: Я не хочу использовать JavaScript для пересчета позиции в каждом событии прокрутки, потому что перепозиционирование в IE не достаточно гладко.

HTML:

<div class="A">
    <div class="B">
        B
    </div>

    <div class="C">
        This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.
    </div>
</div>

CSS

.A {
    background-color: yellow;
    height: 400px;
    width: 700px;
    overflow:scroll;
    position: relative;
}

.B {
    background-color: green;
    height: 1000px;
    width: 1500px;
    position: absolute;
    top:0;
    color:white;
}

.C {
    background-color: red;
    position: absolute;
    left: 100px;
    top: 0px;
    height: 1000px;
    width: 100px;
}

JS (с jQuery):

$('.A').scroll(function(e) {
    $('.C').css('left', e.target.scrollLeft + 100);
});

Ответ 1

При наличии достаточного количества браузеров вы сможете использовать новое значение sticky:

.C {
    position: sticky;
    position: -webkit-sticky;
    left: 100px;
    top: auto; /* Default value */
}

http://jsfiddle.net/5z3nLqq5/12/

Ответ 2

Я играл с вашим образцом (только css) и получил его в состояние, когда оно было ALMOST правильно, но не достаточно близко к imo. Однако, поскольку вы говорите, что не достаточно свободно в IE, я хочу предложить вам это:

var $cRef = $('.C');
$('.A').scroll(function(e) {
 $cRef.css('left', e.target.scrollLeft + 100);
});

Самая большая проблема с IE заключается не в том, что вычисления намного медленнее, но запросы dom могут быть ужасно медленными в зависимости от того, какая версия. Элементы кэширования dom могут иметь большое значение.

PS: Да, я знаю, что вы ищете решение NON-JS. Но предоставив свои аргументы, этот script может решить вашу проблему, вместо того, чтобы в конечном итоге не иметь решения, потому что может быть сложно получить решение для кросс-браузера, которое работает на всех платформах.

Ответ 3

Я добавил еще один контейнер в код HTML, например:

<div class="container">

    <div class="A">

        <div class="B">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
        </div>

    </div>

    <div class="C">
        This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.
    </div>

</div>

Затем добавлен некоторый стиль в класс контейнер

.container {
    background-color: green;
    height: 400px;
    width: 700px;
    position: absolute;
    top:0;
    overflow-x:hidden;
    overflow-y:scroll;
}

И внес некоторые изменения в классы A и C. Я знаю, что НЕ результат, который мы хотим, но он похож на него: вот скрипка http://jsfiddle.net/gnfwg08c/

Ответ 4

Кажется, работает:

JsFiddle

Добавлен контейнер для B, который был шириной A, но высотой B. Работает, если вы не против горизонтальной полосы прокрутки внизу B (которую вы можете скрыть с помощью webkit-scrollbar: JsFiddle):/