Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>Sticky demo</h1>
<p id="log"></p>
<div class="scroller">
  <div class="space"></div>
  <div class="space">
    <div class="sticky">Subject
      <div id="indicator">
        <p>Entry</p>
        <div class="animation entry"><div></div></div>
        <p>Cover</p>
        <div class="animation cover"><div></div></div>
        <p>Contain</p>
        <div class="animation contain"><div></div></div>
        <p>Exit</p>
        <div class="animation exit"><div></div></div>
      </div>
    </div>
  </div>
  <div class="space"></div>
</div>
</body>
</html>
 
.scroller {
  height: 500px;
  overflow: auto;
  border: 1px solid black;
}
.space {
  outline: 2px solid rgb(0, 0, 255, 0.5);
  height: 500px;
}
.sticky {
  outline: 2px solid rgb(255, 0, 0, 0.5);
  background: yellow;
  position: sticky;
  top: 0px;
  height: 50px;
  view-timeline-name: --sticky;
}
#indicator {
  position: fixed;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid gray;
  border-radius: 5px;
}
.animation {
  height: 5px;
  border: 1px solid black;
  position: relative;
}
@keyframes scale {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.animation > div {
  background: blue;
  transform-origin: center left;
  height: 100%;
  animation: scale linear both;
  animation-duration: auto;
  animation-timeline: --sticky;
}
.animation.entry > div {
  animation-range: entry 0% entry 100%;
}
.animation.exit > div {
  animation-range: exit 0% exit 100%;
}
.animation.cover > div {
  animation-range: cover 0% cover 100%;
}
.animation.contain > div {
  animation-range: contain 0% contain 100%;
}
 
let scroller = document.querySelector('.scroller');
let log = document.querySelector('#log');
function update() {
  log.textContent = `scrollTop = ${Math.round(scroller.scrollTop)}px`;
}
update();
scroller.addEventListener('scroll', update)
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
flackrpro
0viewers