使固定页眉水平滚动答案

【问题标题】：Make Fixed Header Scroll Horizontal使固定页眉水平滚动
【发布时间】：2012-04-04 20:22:38
【问题描述】：

伙计们，如果你测试下面的代码，你可以看到一切都很好，除非你缩小窗口，所以 flash 菜单（红色 div）从页面右侧消失。好吧，如果窗口小于 900 像素，则有一个水平滚动窗格，到目前为止一切都很好，但它只是滚动页面的内容！我希望上部也滚动，但只能水平滚动，因为我希望它们被固定（始终保持在网站顶部）...

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

thx & g.r.王牌

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;
}

【问题讨论】：

你想知道什么？如果你按照我描述的那样测试代码，你就会明白我的意思......
实际上我测试了代码，我看不到你说的内容在移动
您是否将窗口的大小调整为小于宽度：800 像素和高度：600 像素？首先，你应该在 div_page 中添加一些
blabla
.....
，因为如果页面内没有任何内容可以滚动，则页面可能不会滚动 ^^跨度>
你能详细告诉我你需要的布局吗？
好吧，我只是想让顶部的菜单处于固定位置，所以只有页面内容在滚动......问题是：如果 div 设置为 position:fixed，你不能滚动到右边，如果菜单的右边部分在窗口之外...

标签： css scroll css-position

【解决方案1】：

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

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

#div_menu 的 CSS 位置应更改为绝对位置。

统一更新： 在纯 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>

【讨论】：

我应该说我只想使用 html、css 和可能的 javascript（但只是为了连接到 flash 菜单）...没有办法制作一个带位置的 div :绝对停留在页面顶部？
实际上，JQuery 是一个非常强大的 JavaScript 包装器，可以处理 HTML 等等，试试看吧..
我知道 jquery 很强大，但最重要的是不要使用 jquery 之类的东西......
用纯 JS 更新了我的答案。
@BaseTaller 可以工作，但在某些情况下（例如打开开发人员工具或其他工具面板）以及在加载不同媒体时更改浏览器大小时不起作用。你对这些有什么想法吗？不管怎样，你得到了 +1 :)

【解决方案2】：

position:sticky , top:0 有一个纯 CSS 解决方案

【讨论】：

最简单干净的解决方案！

【解决方案3】：

看到这个小提琴：Link

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

会有帮助的。

【讨论】：

【解决方案4】：

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

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

这里的事情是，只要 div/any 标签中内容的宽度大于其外部 div 的宽度，就会发生溢出；在这种情况下，您可以使用溢出属性，您可以在其中设置以下属性：隐藏、显示、滚动、自动等。

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

编码愉快.. :)

【讨论】：

【解决方案5】：

        $("#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>

【讨论】：

添加一些文字解释你做了什么;）