[英]Horizontal scrolling of sticky header doesn't working
I have a sticky header on my page, but I found a bug that buttons on right side of sticky header is not visible when browser window is small... and horizontal scrolling does not work for hearder. 我的页面上有一个粘滞头,但是我发现了一个错误,即当浏览器窗口很小时,粘滞头右侧的按钮不可见...并且水平滚动不适用于听众。
Here is html code: 这是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>
Here is my CSS (sass) code: 这是我的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;
}
}
When I make browser window smaller then (sidebar + content) width, horizontal scrolling appears - but it works only for .sidebar and .content. 当我使浏览器窗口的宽度小于(边栏+内容)宽度时,会出现水平滚动-但这仅适用于.sidebar和.content。
How can I make sticky header horizontal-scrollable too? 如何使粘性标头也可水平滚动?
PS it's important to working in FF, Chrome, IE >= 9. And I it not good to change/add new css ids or classes, cause many tests become broken. PS对在FF,Chrome,IE> = 9中工作非常重要。而且更改/添加新的CSS ID或类也不是一件好事,因为很多测试都被破坏了。
Please, help. 请帮忙。 Thanks kindly.
谢谢。
If it will be helpful - jsfiddle with header and content 如果有帮助-带有标题和内容的jsfiddle
I think CSS alone cannot handle this scenario. 我认为仅靠CSS无法解决这种情况。 It would be better if you add a pinch of JS flavour.
如果添加少量的JS味道会更好。 Try this Fiddle .
试试这个小提琴 。
Added a JS code: (Note: I have used JQuery, you can also have it rewritten in pure JS if required) 添加了一个JS代码:(注意:我使用过JQuery,如果需要,也可以用纯JS重写它)
$(window).scroll(function() {
var max_width = 990;
if ($(window).width() < max_width) {
$('.sticky-wrapper').css('margin-left', -$(this).scrollLeft() + "px");
}
});
For what I could test, and for previous experience, is to add a div inside with a width bigger than the container one, and to that container add an overflow-x: auto;
对于我可以测试的内容和以前的经验,是在内部添加一个div,其宽度大于容器的宽度,并向该容器中添加一个
overflow-x: auto;
For example: 例如:
<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;
}
Fiddle: https://jsfiddle.net/afs5k1zp/1/ 小提琴: https : //jsfiddle.net/afs5k1zp/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.