Question

所以小伙子们，如果你测试下面的代码，你可以看到一切都没问题，除非你把窗户缩小，所以闪存菜单（红色div）会向右移出页面。好吧，如果窗口小于900px，有一个HORIZONTAL滚动窗格，到目前为止很好，但它只是滚动页面的内容！我希望上半部分也滚动，但只是横向，因为我希望它们被修复（始终保持在网站顶部）......

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

thx＆amp; 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;
}

Answer 1

在我看来，纯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>

Answer 2

请参阅此小提琴：Link

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

这会有所帮助。

Answer 3

position:sticky , top:0可能只有CSS的解决方案

Answer 4

嘿，那是因为你已经把内容盒/ div的内容固定了;如果你想根据窗口大小调整它们，那么使用宽度的百分比如：width：60％;这实际上是一种响应式设计。但是，如果您只想滚动页面标题，请确保绑定div标记中所需的内容，其宽度应由页面宽度确定，并为该标记应用overflow属性;如果你只想在水平方向，那么使用overflow-x：scroll和overflow-y hidden（因为如果指定了一个方向，其他方向将是可见的但是具有禁用模式），如下所示：

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

这里的事情是，每当div / any标签中的内容宽度超过其外部div的宽度时，就会发生溢出;在这种情况下，您可以使用overflow属性，您可以在其中设置以下属性：隐藏，显示，滚动，自动等。

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

快乐编码.. :)

Answer 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>

使固定标题滚动水平

5 个答案: