Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
170 views
in Technique[技术] by (71.8m points)

Css Grid item stick to top on scroll


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You need to set an height on the grid itself and overflow on the column supposed to scroll ( if i understood your trouble)

body {
  margin: 0;
}
.App {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "col1 col2 col3";
  height: 100vh;
}

.column1 {
  background-color: aquamarine;
  grid-area: col1;
}

.column2 {
  background-color: rebeccapurple;
  grid-area: col2;
  overflow: auto;
}

.column3 {
  background-color: orange;
  grid-area: col3;
}

@media only screen and (max-width: 800px) {
  .App {
    height:auto;
    color: red;
    grid-template-areas:
      "col1 col1 col1"
      "col3 col3 col3"
      "col2 col2 col2";
  }
}
<div class="App">
      <div class="column1">Column 1</div>
      <div class="column2">
        <h1>Column 2</h1>Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Ut ex purus, lobortis eget dapibus sed, elementum nec tortor.
        Fusce vehicula lobortis maximus. Phasellus eu ante ut massa molestie
        laoreet non eget ante. Duis diam nisi, porttitor eu libero eget, commodo
        tincidunt velit. Quisque a urna a quam eleifend faucibus. Integer id est
        et sem placerat scelerisque. Ut tempor condimentum euismod. Phasellus a
        faucibus sem. Vestibulum id interdum ligula. Proin vel tellus eget
        libero convallis finibus sit amet vel tellus. Suspendisse potenti.
        Mauris at eros nec nulla luctus interdum. Sed non cursus diam, vitae
        commodo quam. Nam viverra quam non imperdiet sagittis. Vestibulum quis
        justo ut risus varius hendrerit ac et ex. Vestibulum volutpat a felis ac
        porta. Sed faucibus vitae sapien a tincidunt. Quisque ut magna in ligula
        scelerisque tincidunt et ac est. Proin vitae interdum felis. Ut sem
        enim, dapibus cursus vulputate commodo, venenatis ut turpis. In
        dignissim sapien sit amet lorem aliquam posuere. Suspendisse vel enim
        commodo, posuere orci quis, eleifend mi. Quisque in massa vitae metus
        rhoncus sollicitudin. Vestibulum auctor pharetra orci non eleifend.
        Donec ornare mauris mi, non sagittis odio posuere ut. Nunc quis ultrices
        ex. Vestibulum massa dui, congue eu vestibulum id, cursus sit amet
        turpis. Donec posuere, mauris id finibus cursus, lacus tortor fermentum
        odio, vel tempor leo velit ut velit. Mauris rhoncus tempor nunc, a
        aliquam purus tempus in. Cras imperdiet laoreet nunc, et efficitur odio
        bibendum sit amet. Cras mattis sem non ex gravida, id suscipit nisl
        lobortis. Nunc efficitur vehicula nisi ac gravida. Ut auctor dignissim
        quam, at pulvinar velit vestibulum ut. Fusce nisi augue, porttitor at
        commodo sit amet, porttitor a quam. Vestibulum sit amet lobortis ipsum,
        a sodales tellus. Orci varius natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Donec efficitur consequat risus, vel
        dignissim orci vehicula auctor. Mauris congue justo non augue
        scelerisque, et imperdiet elit faucibus. Nam velit sem, luctus sit amet
        nunc vel, feugiat eleifend justo. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Pellentesque sodales est eget dui accumsan
        laoreet. Aenean tincidunt tempor volutpat. Pellentesque habitant morbi
        tristique senectus et netus et malesuada fames ac turpis egestas. Aenean
        nec viverra leo. Cras ut sapien scelerisque, fermentum ex nec, dapibus
        velit. Vestibulum rhoncus et est nec accumsan. Pellentesque habitant
        morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Curabitur a eros justo. Vivamus efficitur eros vel sollicitudin blandit.
        Vivamus non elementum purus, vitae eleifend eros. Ut sed sodales leo, ac
        pharetra quam. Nunc non libero orci. Duis dapibus lacus eu tortor
        feugiat finibus. Nulla laoreet aliquet commodo. Nam mauris nunc, varius
        sit amet faucibus vitae, facilisis porta nulla. Donec id eleifend metus,
        a laoreet ex. Praesent ac nisi pulvinar, ullamcorper ligula ac,
        imperdiet ligula. Nullam diam justo, vulputate vitae ligula et, placerat
        condimentum lorem. Cras bibendum lectus a eleifend feugiat. Proin
        bibendum eget massa at pulvinar. Ut vel aliquam urna. Lorem ipsum dolor
        sit amet, consectetur adipiscing elit. Ut ex purus, lobortis eget
        dapibus sed, elementum nec tortor. Fusce vehicula lobortis maximus.
        Phasellus eu ante ut massa molestie laoreet non eget ante. Duis diam
        nisi, porttitor eu libero eget, commodo tincidunt velit. Quisque a urna
        a quam eleifend faucibus. Integer id est et sem placerat scelerisque. Ut
        tempor condimentum euismod. Phasellus a faucibus sem. Vestibulum id
        interdum ligula. Proin vel tellus eget libero convallis finibus sit amet
        vel tellus. Suspendisse potenti. Mauris at eros nec nulla luctus
        interdum. Sed non cursus diam, vitae commodo quam. Nam viverra quam non
        imperdiet sagittis. Vestibulum quis justo ut risus varius hendrerit ac
        et ex. Vestibulum volutpat a felis ac porta. Sed faucibus vitae sapien a
        tincidunt. Quisque ut magna in ligula scelerisque tincidunt et ac est.
        Proin vitae interdum felis. Ut sem enim, dapibus cursus vulputate
        commodo, venenatis ut turpis. In dignissim sapien sit amet lorem aliquam
        posuere. Suspendisse vel enim commodo, posuere orci quis, eleifend mi.
        Quisque in massa vitae metus rhoncus sollicitudin. Vestibulum auctor
        pharetra orci non eleifend. Donec ornare mauris mi, non sagittis odio
        posuere ut. Nunc quis ultrices ex. Vestibulum massa dui, congue eu
        vestibulum id, cursus sit amet turpis. Donec posuere, mauris id finibus
        cursus, lacus tortor fermentum odio, vel tempor leo velit ut velit.
        Mauris rhoncus tempor nunc, a aliquam purus tempus in. Cras imperdiet
        laoreet nunc, et efficitur odio bibendum sit amet. Cras mattis sem non
        ex gravida, id suscipit nisl lobortis. Nunc efficitur vehicula nisi ac
        gravida. Ut auctor dignissim quam, at pulvinar velit vestibulum ut.
        Fusce nisi augue, porttitor at commodo sit amet, porttitor a quam.
        Vestibulum sit amet lobortis ipsum, a sodales tellus. Orci varius
        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec efficitur consequat risus, vel dignissim orci vehicula
        auctor. Mauris congue justo non augue scelerisque, et imperdiet elit
        faucibus. Nam velit sem, luctus sit amet nunc vel, feugiat eleifend
        justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Pellentesque sodales est eget dui accumsan laoreet. Aenean tincidunt
        tempor volutpat. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Aenean nec viverra leo. Cras ut
        sapien scelerisque, fermentum ex nec, dapibus velit. Vestibulum rhoncus
        et est nec accumsan. Pellentesque habitant morbi tristique senectus et
        netus et malesuada fames ac turpis egestas. Curabitur a eros justo.
        Vivamus efficitur eros vel sollicitudin blandit. Vivamus non elementum
        purus, vitae eleifend eros. Ut sed sodales leo, ac pharetra quam. Nunc
        non libero orci. Duis dapibus lacus eu tortor feugiat finibus. Nulla
        laoreet aliquet commodo. Nam mauris nunc, varius sit amet faucibus
        vitae, facilisis porta nulla. Donec id eleifend metus, a laoreet ex.
        Praesent ac nisi pulvinar, ullamcorper ligula ac, imperdiet ligula.
        Nullam diam justo, vulputate vitae ligula et, placerat condimentum
        lorem. Cras bibendum lectus a eleifend feugiat. Proin bibendum eget
        massa at pulvinar. Ut vel aliquam urna.
      </div>
      <div class="column3">Column 3</div>
    </div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...