Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="css hero cap n gown">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>css hero cap n gown</title>
</head>
<body>
  <div class="robe">
    <div class="gown" id="target">
      <p>FIRST Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Keep in mind, scrollintoview and jumplink geometry needs explicit offsetting with this approach. See scroll-margin treatment in styles. :/</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p><a href="#target">Jump</a></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p>LAST Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi repellendus aliquam tenetur quidem a, eos, aspernatur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident?</p>
      <p><a href="#target">Jump</a></p>
    </div>
    <div class="cap"><a href="#target">Jump</a></div>
  </div>
</body>
</html>
 
body { margin: 0; }
.robe {
  display: flex;
  flex-flow: column;
  
  --size-robe: 100vh;
  ---size-robe: calc(100vh - 3rem);
  --size-robe-hang: 3rem;
  
  /* overflow: scroll; */
  /* height: var(--size-robe); */
}
.cap,
.robe::after {
  /* flex: 0 0 auto; */
}
.cap {
  height: var(--size-robe);
  margin-bottom: calc(-1 * var(--size-robe) + var(--size-robe-hang));
  z-index: 1;
  order: -1;
  
  
  background-color: #0008;
  box-sizing: border-box;
  border-style: solid;
  border-color: #f098;
  border-width: var(--size-robe-hang) 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: safe center;
  
  /* if hang is set to any value besides zero */
  position: -webkit-sticky;
  position: sticky;
  top: calc((-1 * var(--size-robe)) + var(--size-robe-hang));
}
.gown {
  position: -webkit-sticky;
  position: sticky;
  top: var(--size-robe-hang, 0);
}
.robe::after {
  content: '';
  display: block;
  visibility: hidden;
  height: calc(var(--size-robe) - var(--size-robe-hang));
}
/* SEPARATE DEMO OF OFFSET SCROLL-MARGIN */
/* sadly must use individual negative margins */
/* because scroll-padding on a scrollport can't be negative */
.gown,
.gown * {
  scroll-snap-margin-top: calc((2 * var(--size-robe-hang)) - var(--size-robe));
  scroll-margin-block-start:
    calc(
      (2 * var(--size-robe-hang))
      - var(--size-robe)
      + var(--scroll-margin-gap, 0px)
    )
  ;
  /* should also offset block-end for nearest/end logic */
}
html { scroll-behavior: smooth; }
.cap a { background: #000; color : #fff; padding: .5em}
Output

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

Dismiss x
public
Bin info
jonjohnjohnsonpro
0viewers