问向右滚动时，左侧粘性元素消失
EN

Stack Overflow用户

提问于 2018-10-11 07:38:01

回答 1查看 1.7K关注 0票数 2

我正在尝试创建一个有五个区域的网页，其中三个是粘性的。当用户向下滚动时，粘滞特性工作得很好，但是当窗口向右滚动超过一个视区的宽度时，应该粘附在左侧的元素就会消失。我不知道数据会有多宽，这就是为什么我尝试允许元素自动扩展以适应内容。有没有办法解决这个问题，让左边的元素在用户滚动到右边时保持可见？

地域描述如下：

header -当用户滚动vertically.
upperleft时，这个区域应该消失-这个区域是一个小的列标题，它粘在左边和顶部，而scrolling.
upperright -当垂直滚动时，这个区域应该只粘在顶部。当用户滚动到right.
bottomleft时，它应该消失在upperleft后面-当用户向右滚动时，这个区域应该停留在屏幕的左侧，当用户滚动down.
bottomright时，这个区域应该消失在upperleft后面-这个区域应该消失在upperleft，upperright和bottomleft后面，这取决于用户滚动的方式。

下面是一个演示问题的示例(我使用的是Firefox 62.0.3)：

body {
  margin: 1rem;
  display: grid;
  grid-template-columns: 3rem auto;
  grid-template-rows: 12vh 2rem auto;
  grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";}

.header {
  position: fixed;
  grid-area: header;
  display: block;
  background: white;
  text-align: center;
  width: 100vw;
}

.topleft {
  grid-area: topleft;
  background-color: #bababa;
  border: solid 1px black;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}

.topright {
  grid-area: topright;
  background-color: #c0c0c0;
  border: solid 1px black;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  display: inline-block;
  width: 300vw; /* simulate large horizontal data set */
}

.bottomleft {
  grid-area: bottomleft;
  background-color: #c0c0c0;
  border: solid 1px black;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  height: 300vh; /* simulate large vertical data set */
}

.bottomright {
  grid-area: bottomright;
  background-color: #cacaca;
  border: solid 1px brown;
  box-sizing: border-box;
  text-align: left;
  display: inline-block;
  height: 300vh; /* simulate large vertical data set */
  width: 300vw; /* simulate large horizontal data set */
}

<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="bottomright">
Large area with cells
</div>

html

css

sticky

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-11 08:16:56

你有一个重叠的问题，你的身体是一个块元素，所以它的宽度不会超过屏幕的尺寸，这就产生了左边栏的问题。

一个简单的解决方法是将body设置为inline-grid

body {
  margin: 1rem;
  display: inline-grid;
  grid-template-columns: 3rem auto;
  grid-template-rows: 12vh 2rem auto;
  grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";}

.header {
  position: fixed;
  grid-area: header;
  display: block;
  background: white;
  text-align: center;
  width: 100vw;
}

.topleft {
  grid-area: topleft;
  background-color: #bababa;
  border: solid 1px black;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}

.topright {
  grid-area: topright;
  background-color: #c0c0c0;
  border: solid 1px black;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  display: inline-block;
  width: 300vw; /* simulate large horizontal data set */
}

.bottomleft {
  grid-area: bottomleft;
  background-color: #c0c0c0;
  border: solid 1px black;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  height: 300vh; /* simulate large vertical data set */
}

.bottomright {
  grid-area: bottomright;
  background-color: #cacaca;
  border: solid 1px brown;
  box-sizing: border-box;
  text-align: left;
  display: inline-block;
  height: 300vh; /* simulate large vertical data set */
  width: 300vw; /* simulate large horizontal data set */
}

<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="bottomright">
Large area with cells
</div>

为了更好地说明这个问题，您可以向初始代码添加边框，您将看到左侧边栏将到达此边框，然后停止：

body {
  margin: 1rem;
  display: grid;
  border:2px solid red;
  grid-template-columns: 3rem auto;
  grid-template-rows: 12vh 2rem auto;
  grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";}

.header {
  position: fixed;
  grid-area: header;
  display: block;
  background: white;
  text-align: center;
  width: 100vw;
}

.topleft {
  grid-area: topleft;
  background-color: #bababa;
  border: solid 1px black;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}

.topright {
  grid-area: topright;
  background-color: #c0c0c0;
  border: solid 1px black;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  display: inline-block;
  width: 300vw; /* simulate large horizontal data set */
}

.bottomleft {
  grid-area: bottomleft;
  background-color: #c0c0c0;
  border: solid 1px black;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  height: 300vh; /* simulate large vertical data set */
}

.bottomright {
  grid-area: bottomright;
  background-color: #cacaca;
  border: solid 1px brown;
  box-sizing: border-box;
  text-align: left;
  display: inline-block;
  height: 300vh; /* simulate large vertical data set */
  width: 300vw; /* simulate large horizontal data set */
}

<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="bottomright">
Large area with cells
</div>

顺便说一句，最好避免将body用作容器，最好依靠您自己的容器，以便于以后添加更多结构或将代码集成到其他地方

body {
 margin:0;
}
.container {
  margin: 1rem;
  display: inline-grid;
  border:2px solid red;
  grid-template-columns: 3rem auto;
  grid-template-rows: 12vh 2rem auto;
  grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";}

.header {
  position: fixed;
  grid-area: header;
  display: block;
  background: white;
  text-align: center;
  width: 100vw;
}

.topleft {
  grid-area: topleft;
  background-color: #bababa;
  border: solid 1px black;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}

.topright {
  grid-area: topright;
  background-color: #c0c0c0;
  border: solid 1px black;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  display: inline-block;
  width: 300vw; /* simulate large horizontal data set */
}

.bottomleft {
  grid-area: bottomleft;
  background-color: #c0c0c0;
  border: solid 1px black;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  height: 300vh; /* simulate large vertical data set */
}

.bottomright {
  grid-area: bottomright;
  background-color: #cacaca;
  border: solid 1px brown;
  box-sizing: border-box;
  text-align: left;
  display: inline-block;
  height: 300vh; /* simulate large vertical data set */
  width: 300vw; /* simulate large horizontal data set */
}

<div class="container">
<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="bottomright">
Large area with cells
</div>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52750172

复制

相似问题

问向右滚动时，左侧粘性元素消失
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向右滚动时，左侧粘性元素消失EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向右滚动时，左侧粘性元素消失
EN