CODEWITHSUNDEEP
jqueryhtmlcsssticky
user9018937368
user9018937368

Reputation: 99

Create a sticky element

I would like to create a sticky element on this JSFIDDLE. The 'blue' div should be fixed until the 'pink' touch it and then the 'blue' div could be in relative position.

HTML : 

<div class='blue'> I want to stay 'fixe' until the pink bloc touch me. </br> Then I can be 'relative'.</div>

<div class='pink'></div>

CSS :

body {margin:0;}

.blue {
 height:50vh;
 position:relative;
 width:100%;
 display:inline-block;
 background:blue;
 color:white;
 text-align:center;
}

.pink {
 height:500vh;
 margin-top:40vh;
 position:absolute;
 width:100%;
 display:inline-block;
 background:pink;
}

Upvotes: 1

Views: 139

Answers (2)

Benn Jomy
Benn Jomy

Reputation: 24

Try this. :)

div.blue {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: blue;
    height: 50vh;
    color:#fff;
    font-size: 20px;
    text-align: center;
}
div.dummy {
	width: 100%;
    height: 500px;
}
div.pink {
    position: relative;
    top: 0;
    background-color: pink;
    padding: 50px;
    height: 500vh;
    font-size: 20px;
}
<div>
  <div class="blue">I want to stay 'fixed' until the pink bloc touch me. <br/> Then I can be 'relative'.</div>
  <div class="dummy"></div>
</div>
<div class="pink">

Oh hey by the way don't use < /br > . Use < br > or < br/ >. Happy to Help you.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272713

You can do it using sticky position. Simply pay attention to browser support

body {
  margin: 0;
}

.container {
  height: 90vh; /*height of the blue + margin-top of the pink*/
}

.blue {
  height: 50vh;
  position: sticky;
  top: 0;
  background: blue;
  color: white;
  text-align: center;
}

.pink {
  height: 500vh;
  background: pink;
}
<div class="container">
  <div class='blue'> I want to stay 'fixe' until the pink bloc touch me. <br> Then I can be 'relative'.</div>
</div>
<div class='pink'></div>

Upvotes: 3

Related Questions