title: Sticky button that stay below the content when the page is scrolled to the end
body: <p>I need to implement the button that floats over the content on the same position before the window is scrolled to the end and then sticks to the end of content.</p>
  
  <p>In other words, the element acted as <code>relative</code> till it reaches specified position. Starting from this position behavior changed as <code>fixed</code>.</p>
  
  <p>So I'm searching for a css way to do this. Or javascript solution, if it's not possible with stylesheet.</p>
  
  <h1>Expected result:</h1>
  
  <p>When the content block is under specified position:</p>
  
  <p><a href="https://i.stack.imgur.com/rWlnq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rWlnq.png" alt="at the middle of the page"></a></p>
  
  <p>And when it reaches the end so initial position is below the its bottom edge:</p>
  
  <p><a href="https://i.stack.imgur.com/154nP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/154nP.png" alt="at the bottom of the page"></a></p>