即使向右滚动，如何使div跨越100％的页面

时间：2017-11-15 15:22:54

标签： html css

这可能在某个地方得到了回答，但我找不到一个好的解决方案。我想创建一个标题，其行为就像一个div，它是position：absolute，因为它会在向下滚动时保持在页面顶部。虽然，我也希望用户能够左右滚动并使标题保持其视口的100％宽度。现在，如果位置绝对，则在图像右侧会出现标题右侧的空白区域。如何在从右向左滚动时创建一个保持100％宽度的标题，但在仅使用css向下滚动时也会保持在页面顶部？

enter image description here

2 个答案:

答案 0 :(得分：0)

您可以使用position:fixed将标题修复到页面顶部 https://developer.mozilla.org/en-US/docs/Web/CSS/position

答案 1 :(得分：0)

Navbar：将其设为position:fixed

您的内容宽度为300％ 如小提琴所示。

修改

通过添加JQuery，我能够获得所需的输出。

  1. 您可以向左和向右滚动content，将导航栏保持在原位。
  2. 滚动垂直时，导航栏会消失。就像常规网页一样。

    3. $(window).scroll({
    previousTop: 0
  },
  function() {
    var currentTop = $(window).scrollTop();
    if (currentTop <= this.previousTop) {
      $(".header").show();
    } else {
      $(".header").hide();
    }
    this.previousTop = currentTop;
  });
    body {
  margin: 0;
  height: 700px;
}

h1 {
  margin: 0;
  position: relative;
  top: 20%;
}

.header {
  position: fixed;
  margin: 0;
  height: 30px;
  width: 100%;
  background-color: red;
}

.content {
  background-color: blue;
  height: 100%;
  width: 400%;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class='header'></div>
  <div class='content'>
    <h1 style="color:white">Scroll Right</h1>
    <h1 style="color:red; background-color:yellow; left:100%;">Scroll Right</h1>
    <h1 style="color:gree; left:200%;">Scroll Right</h1>

  </div>
</body>

相关问题
最新问题