CSS 使固定标题滚动水平
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9785598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Fixed Header Scroll Horizontal
提问by Ace
so guys, if u test the code below, u can see that everything is alright, except if u size down the window, so the flash menu ( red div ) is going out of the page to the right. well if the window is smaller then 900px, there is a HORIZONTAL scrollpane, so far so good, but it just scrolls the content of the page! I want the upper part also to scroll, but only horizontal, cuz I want them to be fixed (stay on top of the site always)...
所以伙计们，如果你测试下面的代码，你可以看到一切都很好，除非你缩小了窗口的大小，所以 flash 菜单（红色 div）从页面右侧消失了。好吧，如果窗口小于 900 像素，则有一个水平滚动窗格，到目前为止还不错，但它只是滚动页面的内容！我希望上部也滚动，但只能水平滚动，因为我希望它们被固定（始终保持在网站顶部）...
any suggestions? I've tried so many things from google, but no one of them was the right one 4 me...
有什么建议？我从谷歌尝试了很多东西，但没有一个是正确的 4 我...
thx & g.r. ace
谢谢和恩典
html:
html：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="div_page" align="center">
// page content goes here
</div>
<div id="div_menu">
<img src="img/logo.png" alt="<Logo>" style="position:absolute; top:0px; left:20px; width:225px; height:150px;">
<div id="div_flash"></div>
</div>
</body>
</html>
css:
css：
@charset "utf-8";
body {
padding:0px;
margin:0px;
}
#div_menu {
position:fixed;
top:0px; right:0px; left:0px;
width:100%; height:40px;
min-width:800px;
overflow:visible;
background-image:url(img/menu.png);
background-position:top left;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 40px;
background-color:#333;
}
#div_flash {
position:absolute;
top:0px; left:250px;
width:500px; height:150px;
background-color:#F00;
}
#div_page {
position:absolute;
top:40px; right:0px;left:0px;
min-width:800px; min-height:500px;
}
采纳答案by BasTaller
As it seems to me, pure CSS can't solve this issue. But adding a few lines of JQuery may help:
在我看来，纯 CSS 无法解决这个问题。但是添加几行 JQuery 可能会有所帮助：
<script type="text/javascript">
$(window).scroll(function() {
$('#div_menu').css('top', $(this).scrollTop() + "px");
});
</script>
CSS position of #div_menu should be changed to absolute.
#div_menu 的 CSS 位置应更改为绝对。
UPD:In pure JS it would be:
UPD：在纯 JS 中，它将是：
<script type="text/javascript">
var div_menu = document.getElementById('div_menu');
window.onscroll = function (e) {
if (div_menu)
div_menu.style.top = window.pageYOffset + 'px';
}
</script>
回答by Archna Rangrej
回答by Lakshminathan Laky
There is a CSS-only solution possible with position:sticky , top:0
有一个仅限 CSS 的解决方案 position:sticky , top:0
回答by Vidhya Sagar Reddy
Hie, that is because you have made the widht of the content boxes/divs fixed; If you want to make them adjust as per the window size, then use percentages for width like: width: 60%; This is infact a responsive design. But still if you want your page header only to be scrolled, then make sure that you bound the content required in a div tag, whose width should be determined by page's width and apply overflow property for that tag; if you want only in horizontal direction, then use overflow-x:scroll and overflow-y hidden(since if one direction is specfied, other will be visible but with disabled mode), which is as shown:
嗨，那是因为您已经固定了内容框/div 的宽度；如果您想让它们根据窗口大小进行调整，请使用宽度百分比，例如：width: 60%; 这实际上是一个响应式设计。但是，如果您只想滚动页眉，请确保在 div 标签中绑定所需的内容，其宽度应由页面的宽度决定，并为该标签应用溢出属性；如果你只想要水平方向，那么使用 overflow-x:scroll 和 overflow-y hidden（因为如果指定了一个方向，另一个将可见但具有禁用模式），如图所示：
<div style="width:60%;overflow-x:scroll; overflow-y:hidden;">
//your conetnt//including divs
</div>
The thing here is, whenever the width of the content in a div/any tag is more than the width of its outer div, then overflow happens; in this case, you can use overflow property, where you can set properties like : hidden, show, scroll, auto etc..
这里的问题是，每当 div/any 标签中的内容宽度大于其外部 div 的宽度时，就会发生溢出；在这种情况下，您可以使用溢出属性，您可以在其中设置属性，例如：隐藏、显示、滚动、自动等。
But try to avoid this, because responsive design is the next-generation markup language technique, where the widths(size) should be dependent on the browser size... :)
但是尽量避免这种情况，因为响应式设计是下一代标记语言技术，其中宽度（大小）应该取决于浏览器大小...... :)
Happy coding.. :)
快乐编码.. :)
回答by bouraine
$("#body").scroll(function() {
scrolled = $("#body").scrollLeft();
$("#header").scrollLeft(scrolled);
});.header {
background-color: red;
position: absolute;
top: 10px;
left: 8px;
width: 120px;
overflow: hidden;
}
.body {
overflow: scroll;
margin-top: 51px;
height: 100px;
width: 120px;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell1 {
border-top: 1px solid red;
border-right: 1px solid red;
background: #DDD;
height: 40px;
min-height: 40px;
width: 50px;
min-width: 50px;
}
.cellh {
border-top: 1px solid red;
border-right: 1px solid red;
background: yellow;
height: 40px;
width: 50px;
min-width: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here a very simple solution
Uses Flex for the table formatting -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="header" class="row header">
<div class="cellh">1</div>
<div class="cellh">2</div>
<div class="cellh">3</div>
<div class="cellh ">4</div>
<div class="cellh">5</div>
</div>
<div id="body" class="col body">
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
</div>
</div>
</div>
</body>
</html>