5.4: Sticky

A sticky element combines the values of relative and fixed.

• starts with a position value of relative

• position value switches to fixed when it reaches a set scroll location

Make the following changes to the code.

.squareGreen
    position: sticky;
    margin: 100px;
    top: -1;

Change class squareBlue to

.barBlue{
position: relative;
width: 70em;
height: 100px;
margin: 0px;
background: #154360
}

Scroll up. Keep an eye on the squareGreen and barBlue. static