Плавающий текст в левой части экрана при горизонтальной прокрутке

Question

Я пытаюсь сделать расписание для фестиваля в HTML и CSS. Много работы было сделано, но я не могу понять это. Поэтому я создал расписание с использованием списков 'UL' 'LI' в HTML со стилем в документе CSS.

На данный момент это выглядит так. Посмотрите на скриншот здесь .

Поскольку это очень большое расписание, есть горизонтальная прокрутка. Я пытаюсь выяснить, как позволить тексту сценического имени, например, «Har & Mar», прокручивать страницу, чтобы она оставалась слева при прокрутке влево или вправо. Потому что сейчас это не так; P

Я пытался все, чтобы решить эту проблему, но я не знаю, как это сделать. Пожалуйста, пришлите помощь! Мой код здесь:

<iframe width="100%" height="300" src="//jsfiddle.net/CasperBoon/ayjsuLxe/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

С наилучшими пожеланиями, Каспер Бун

Answer 1

Только с css будет действительно сложно.

Но с помощью jq или js это станет очень легко.

Вот как вы могли бы это сделать

Я предположил, что show-right-shadow - это прокручиваемый элемент

$(".show-right-shadow").scroll(function(e){
var left = this.scrollLeft;
$(".stage-name").css(// make all the divs [stage-name] follow the scroll
{
position:"absolute", // use absolute and not fixed, so u dont mess upp the design
left:this.scrollLeft, // follow the scroll
"z-index":9999, // make it at top of all other elements
})
});

Answer 2

Если у вас есть какой-либо метод выбора, какое имя будет плавающим, вы можете достичь этого, применив свойство position: fixed; к контейнеру этого имени. Согласно вашему коду, оно должно выглядеть примерно так (для «Har & Mar»):

CSS

li.stage-0 > .stage-name {
   position: fixed !important;
   left: 0;
}

Полагаю, вы захотите, чтобы при прокрутке все имена фиксировались слева, чтобы это выглядело так:

CSS

li > .stage-name {
   position: fixed !important;
   left: 0;
}