Html - Stick image inside a column and release it

ZIX
October 13, 2023
246 views
0 votes
2 Answers

I want the column 2 MainImage stick/stay on its position while scrolling and when the column 1 ended the column 2 will go with it. Also it tried the "position:stick" nothing happen maybe I missed something on my css.

.column2 {
  position: sticky;
  top: 10;
}

<div class="row">
  <div class="column1">
    <div class="row">
      <div class="column">Image1</div>
      <div class="column">Image2</div>
      <div class="column">Image3</div>
    </div>
    <div class="row">
      <div class="column">Image4</div>
      <div class="column">Image5</div>
      <div class="column">Image6</div>
    </div>
    <div class="row">
      <div class="column">Image7</div>
      <div class="column">Image8</div>
      <div class="column">Image9</div>
    </div>
  </div>
  <div class="column2">
    <img src="MainImage">
  </div>
</div>

Tags: css html

Answers

You have to change the div order, like so:

.column2 {
  position: sticky;
  top: 10px;
}

<div class="row">
  <div class="column2">
    <img src="MainImage">
  </div>
  <div class="column1">
    <div class="row">
      <div class="column">Image1</div>
      <div class="column">Image2</div>
      <div class="column">Image3</div>
    </div>
    <div class="row">
      <div class="column">Image4</div>
      <div class="column">Image5</div>
      <div class="column">Image6</div>
    </div>
    <div class="row">
      <div class="column">Image7</div>
      <div class="column">Image8</div>
      <div class="column">Image9</div>
    </div>
    <div class="row">
      <div class="column">Image10</div>
      <div class="column">Image11</div>
      <div class="column">Image12</div>
    </div>
    <div class="row">
      <div class="column">Image13</div>
      <div class="column">Image14</div>
      <div class="column">Image15</div>
    </div>
  </div>

</div>

try this hopefully it is helpful for you.

.row {
  display: flex;
}

.column1 {
  flex: 3; /* Adjust the flex value to control the width of column1 */
}

.column2 {
  flex: 1; /* Adjust the flex value to control the width of column2 */
  position: sticky;
  top: 0;
}

<div class="row">
  <div class="column1">
    <div class="row">
      <div class="column">Image1</div>
      <div class="column">Image2</div>
      <div class="column">Image3</div>
    </div>
    <div class="row">
      <div class="column">Image4</div>
      <div class="column">Image5</div>
      <div class="column">Image6</div>
    </div>
    <div class="row">
      <div class="column">Image7</div>
      <div class="column">Image8</div>
      <div class="column">Image9</div>
    </div>
  </div>
  <div class="column2">
    <img src="MainImage" alt="Main Image">
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Stick image inside a column and release it

Answers