小编Edd*_*die的帖子

使div粘滞,使其随页面滚动

我已经搜索了一段时间,并尝试了一些方法,但是无法使#topDiv我的代码随页面滚动。我尝试将位置设置为,position: sticky但这还没有完成。

这是我的代码:

body {
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}

#topDiv {
  height: 50%;
  width: 100%;
  background: url(https://placehold.it/1000x200);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: sticky;
}

#bottomDiv {
  min-height: 50%;
}
Run Code Online (Sandbox Code Playgroud)
<body id="background" onresize="VerticalAlign();">
  <div id="topDiv">
    <img id="icon">
  </div>
  <div id="bottomDiv">
    <div id="textBox">
      <h1 id="header" class="check-element">Header</h1>
      <h2 id="subheader1" class="moveSub1 check-element">Subheader</h2>
      <p id="text1" class="movePara1 check-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec leo quam. Proin vulputate convallis augue …
Run Code Online (Sandbox Code Playgroud)

html css html5 css3

5
推荐指数
1
解决办法
106
查看次数

标签 统计

css ×1

css3 ×1

html ×1

html5 ×1