使固定标题滚动水平 [英] Make Fixed Header Scroll Horizontal
问题描述
so guys，如果你测试下面的代码，u可以看到一切都是好的，除非u大小下来窗口，所以flash菜单（红色div）是走出页面的权利。
好，如果窗口小于900px，有一个HORIZONTAL滚动条，到目前为止这么好，但它只是滚动页面的内容！
i想要上部也滚动，但只有水平，cuz我想要它们被固定（总是站在网站的顶部）...
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)...
有什么建议么 ？我试过从谷歌这么多的东西，但没有一个是正确的一个4我...
any suggestions ? i've tryed so many things from google, but no one of them was the right one 4 me...
thx&克。
thx & g.r. ace
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：
@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;
}
推荐答案
纯CSS不能解决这个问题。
但是添加几行JQuery可能会有帮助：
As it seems to me, pure CSS can't solve this issue. But adding a few lines of JQuery may help:
<script type="text/javascript">
$(window).scroll(function() {
$('#div_menu').css('top', $(this).scrollTop() + "px");
});
</script>
#div_menu的CSS位置应改为绝对。
CSS position of #div_menu should be changed to absolute.
UPD：
在纯JS中，它将是：
UPD: In pure JS it would be:
<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>
这篇关于使固定标题滚动水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
