Css 使固定标题水平滚动

所以伙计们，如果你测试下面的代码，你可以看到一切都是好的，除了如果你缩小窗口的大小，那么flash菜单（红色div）就会从页面的右边消失。 如果窗口小于900px，则有一个水平滚动窗格，目前为止还不错，但它只是滚动页面的内容！ 我希望上面的部分也滚动，但只有水平，因为我希望他们是固定的（始终停留在网站顶部）

有什么建议吗？我从谷歌尝试了很多东西，但是没有一个是对的

thx&g.r.ace

html:

---

在我看来，纯CSS无法解决这个问题。 但是添加几行JQuery可能会有所帮助：

<script type="text/javascript">
    $(window).scroll(function() {
        $('#div_menu').css('top', $(this).scrollTop() + "px");
    });
</script>

$（窗口）。滚动（函数（）{
$（'div_menu'）.css（'top'，$（this.scrollTop（）+“px”）；
});

#div_菜单的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>

var div_menu=document.getElementById（'div_menu'）；
window.onscroll=函数（e）{
如果（div_菜单）
div_menu.style.top=window.pageYOffset+'px'；
}  

Hie，这是因为您已修复了内容框/分区的宽度；如果要使它们根据窗口大小进行调整，请使用宽度百分比，例如：宽度：60%；这实际上是一种响应性设计。但是，如果仍然希望只滚动页面标题，那么请确保绑定div标记中所需的内容，其宽度应由页面的宽度决定，并为该标记应用溢出属性；如果只希望在水平方向上，则使用overflow-x:scroll和overflow-y HINDED（因为如果指定了一个方向，则另一个方向将可见，但处于禁用模式），如下所示：

<div style="width:60%;overflow-x:scroll; overflow-y:hidden;">
   //your conetnt//including divs
</div>

//您的合同//包括div

这里的问题是，每当div/任何标记中内容的宽度大于其外部div的宽度时，就会发生溢出；在这种情况下，您可以使用overflow属性，您可以在其中设置诸如：隐藏、显示、滚动、自动等属性

但请尽量避免这种情况，因为响应式设计是下一代标记语言技术，其宽度（大小）应取决于浏览器大小…：）

快乐编码…）

看这把小提琴：

这会很有帮助。

$（“#body”）.滚动（函数（）{
scrolled=$（“#body”）.scrollLeft（）；
$（“#标题”）。向左滚动（已滚动）；
});
.header{
背景色：红色；
位置：绝对位置；
顶部：10px；
左：8px；
宽度：120px；
溢出：隐藏；
}
.身体{
溢出：滚动；
边缘顶端：51px；
高度：100px；
宽度：120px；
}
上校{
显示器：flex；
弯曲方向：立柱；
}
.行{
显示器：flex；
弯曲方向：行；
}
.cell1{
边框顶部：1px纯红；
右边框：1px纯红；
背景：DDD；
高度：40px；
最小高度：40px；
宽度：50px；
最小宽度：50px；
}
塞尔赫先生{
边框顶部：1px纯红；
右边框：1px纯红；
背景：黄色；
高度：40px；
宽度：50px；
最小宽度：50px；
}

1.
2.
3.
4.
5.
有一个CSS唯一的解决方案，可以使用
位置：sticky，top:0
我应该说我只想使用html、CSS和javascript（但只是为了连接到flash菜单）。。。有没有一种方法可以使用position:absolute创建div以保持页面的顶部？事实上，JQuery是JavaScript上非常强大的包装器，可以处理HTML，而且更重要的是，试试看..我知道JQuery很强大，但最重要的是不用像jquery之类的东西来做这件事……用纯JS更新我的答案。@Basethiller这是可行的，但在某些情况下，例如打开开发人员工具或其他工具面板，以及当加载不同的媒体以改变浏览器大小时，这是行不通的。你知道这些吗？不管怎样，你得到+1:）你想知道什么？如果你像我描述的那样测试代码，你会明白我的意思…事实上我测试了代码，但我看不到你所说的内容在移动。你是否调整窗口的大小，使其小于宽度：800px和高度：600px？首先，你应该在div_页面上适当地添加一些blabla
…
，因为如果页面内没有可滚动的内容，页面将不会滚动^^^^你能详细地告诉我你需要的布局吗？好吧，我只是希望菜单在顶部的固定位置，所以只有页面内容在滚动。。。问题是：如果将div设置为position:fixed，则无法向右滚动，如果菜单的右侧部分不在窗口中…请添加一些文本说明；）最简单、最干净的解决方案！
<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>

<div style="width:60%;overflow-x:scroll; overflow-y:hidden;">
   //your conetnt//including divs
</div>

$headerDiv = $('.header-wrapper');
$rowDiv = $('.row-wrapper');
$rowDiv.scroll(function(e) {
    $headerDiv.css({
        left: -$rowDiv[0].scrollLeft + 'px'
    });
});