[英]Horizontal scrolling of sticky header doesn't working
我的页面上有一个粘滞头,但是我发现了一个错误,即当浏览器窗口很小时,粘滞头右侧的按钮不可见...并且水平滚动不适用于听众。
这是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。
如何使粘性标头也可水平滚动?
PS对在FF,Chrome,IE> = 9中工作非常重要。而且更改/添加新的CSS ID或类也不是一件好事,因为很多测试都被破坏了。
请帮忙。 谢谢。
如果有帮助-带有标题和内容的jsfiddle
我认为仅靠CSS无法解决这种情况。 如果添加少量的JS味道会更好。 试试这个小提琴 。
添加了一个JS代码:(注意:我使用过JQuery,如果需要,也可以用纯JS重写它)
$(window).scroll(function() {
var max_width = 990;
if ($(window).width() < max_width) {
$('.sticky-wrapper').css('margin-left', -$(this).scrollLeft() + "px");
}
});
对于我可以测试的内容和以前的经验,是在内部添加一个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;
}
小提琴: https : //jsfiddle.net/afs5k1zp/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.