Ace*_*Ace 14 css scroll css-position
所以伙计们,如果你测试下面的代码,你可以看到一切都没问题,除非你按窗户大小调整,所以闪存菜单(红色div)将从页面向右移动.好吧,如果窗口小于900px,有一个HORIZONTAL滚动窗格,到目前为止很好,但它只是滚动页面的内容!我希望上半部分也滚动,但只是水平,因为我希望它们被修复(始终保持在网站的顶部)...
有什么建议？我从谷歌尝试了很多东西,但没有一个是正确的4我...
thx&gr 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可能会有所帮助:
<script type="text/javascript">
$(window).scroll(function() {
$('#div_menu').css('top', $(this).scrollTop() + "px");
});
</script>
#div_menu的CSS位置应该更改为绝对.
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>