Question

我正在尝试为HTML和CSS的音乐节制定时间表。许多工作已经完成，但我无法弄清楚。因此，我使用HTML中的列表“ UL”和“ LI”制作了时间表，并在CSS文档中设置了样式。

因为这是一个非常庞大的时间表，所以会有一个水平滚动。我要弄清楚的是如何让舞台名称的文本（例如“ Har＆Mar”）随页面滚动，因此当您向左或向右滚动时，它保持在左侧。 Because that ain't the case at the moment ;P

我尽一切努力解决了这个问题，但是我不知道该如何完成。请发送帮助！我的代码在这里：

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

最好的问候，卡斯珀·布恩

Answer 1

如果您有任何选择浮动名称的方法，则可以通过将position: fixed;属性应用于该名称的容器来实现。根据您的代码，它应该看起来像这样（对于“ Har＆Mar”而言）：

CSS

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

我想您想在滚动时将所有名称都固定在左侧，所以看起来像这样：

CSS

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

Answer 2

只有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
})
});

横向滚动时在屏幕左侧浮动文本

2 个答案: