我的页面上有一个粘性标题,但我发现了一个错误,当浏览器窗口较小时,粘贴标题右侧的按钮不可见...而水平滚动对听众来说不起作用。
这是html代码:
<div class="search-container">
<div class="sticky-wrapper">
<!-- it's fixed header -->
</div>
<div class="sidebar">
<!-- search filters e.g. -->
</div>
<div class="content">
<!-- search results e.g. -->
</div>
</div>
这是我的CSS(sass)代码:
.search-container {
.sticky-wrapper {
box-shadow: 0 3px 3px 0 #8f8f8f;
position: fixed;
top: 0;
z-index: 999;
}
.sidebar {
float: left;
margin-left: 5px;
width: 229px;
}
.content {
background: none repeat scroll 0 0 #fff;
border-top: 4px solid #5d5d5d;
display: inline;
float: left;
margin-left: 18px;
margin-right: 0;
width: 691px !important;
}
}
当我使浏览器窗口变小(侧边栏+内容)宽度时,会出现水平滚动 - 但它仅适用于.sidebar和.content。
如何使粘性标题也可水平滚动?
P.S。在FF,Chrome,IE&gt; = 9中工作很重要。而且我不好改变/添加新的CSS ID或类,导致许多测试被破坏。
请帮忙。 谢天谢地。
如果它有用 - jsfiddle标题和内容
答案 0 :(得分:2)
我认为仅靠CSS无法处理这种情况。如果添加一些JS风味会更好。试试这个Fiddle。
添加了一个JS代码:(注意:我已经使用过JQuery,如果需要,你也可以用纯JS重写它)
$(window).scroll(function() {
var max_width = 990;
if ($(window).width() < max_width) {
$('.sticky-wrapper').css('margin-left', -$(this).scrollLeft() + "px");
}
});
答案 1 :(得分:-1)
对于我可以测试的内容,以及之前的经验,是添加一个宽度大于容器1的div,并向该容器添加overflow-x: auto;
例如:
<div class="sticky-wrapper">
<div class="bigger">Your text here</div>
</div>
.sticky-wrapper {
box-shadow: 0 3px 3px 0 #8f8f8f;
position: fixed;
top: 0;
z-index: 999;
background: grey;
width: 900px;
overflow-x: auto;
}
.bigger {
width: 1000px;
}