Keep Div/HTML Block Sticky - Stay at top during scroll

[kpcollier]

I have a submission form that includes an embedded video at the top. The video is in an iframe in an html block at the top of my page. I am trying to give it a sticky position so that the video is always displayed in view at the top of the page, even when scrolling down the datapage. I've tried a couple of ways but can't get it quite right:

With just CSS - this doesn't seem to work at all. If I add a "content" div with a large margin, the video stays sticky through the content div, but stops when reaching the actual datapage content with the submission form fields.

<div class="header">
  <!-- Your header content -->
  <iframe class="videos" src="https://player.XXXXXXXXXXXXXXXXXXXX.com" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

<div class="content">
  <!-- Your content here -->
</div>

<style>
  .header {
    position: sticky;
    top: 0;
    background-color: white; /* Adjust as needed */
    z-index: 1000; /* Ensure it's above other content */
    width: 100%; /* Ensure it spans the entire width */
  }

  .videos {
    width: 600px;
    height: 325px;
  }

  section[id^="cbTable"] {
    width: 635px;
  }

  /* Add a top margin to the content to prevent content from being hidden behind the sticky header */
  .content {
    margin-top: 375px; /* Adjust this value to match your header's height */
  }

</style>

 

My attempt with JavaScript was kind of working. It has a weird "jump" when you start to scroll, about 25-50px in height, that brings the page to the top again. If you use the mouse scroll wheel quickly, you can get past this initial jump and the video stays sticky at the top throughout the rest of the page. But, if you scroll slowly with the wheel, or try to use the scrollbar on page, you can't get past the initial jump that brings it back to the top of the page. 

<div id="placeholder" class="header-placeholder"></div>

<div id="myHeader" class="header">
  <!-- Your header content -->
  <iframe class="videos" src="https://player.xxxxxxxxxxxxxxx.com/" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

<style>
  .videos {
    width: 600px;
    height: 325px;
  }

  section[id^="cbTable"] {
    width: 635px;
  }

  /* The sticky class is added to the header with JS when it reaches its scroll position */
  .sticky {
    position: fixed;
    top: 0;
    width: 42%;
  }

  /* Style the placeholder to match the height of the header */
  .header-placeholder {
    height: 0; /* Initially set to 0 */
  }
</style>

<script>
  document.addEventListener('DataPageReady', function (event) {
    // Get the header
    var header = document.getElementById("myHeader");
    var placeholder = document.querySelector(".header-placeholder");

    // Get the offset position of the header
    var offset = header.offsetTop;
    var prevElement = header.previousElementSibling;

    while(prevElement) {
      offset += prevElement.offsetHeight;
      prevElement = prevElement.previousElementSibling;
    }

    // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
    window.onscroll = function() {
      if (window.pageYOffset > offset) {
        header.classList.add("sticky");
        placeholder.style.height = header.offsetHeight + "px"; // Set the placeholder height to the header height
      } else {
        header.classList.remove("sticky");
        placeholder.style.height = "0"; // Reset the placeholder height
      }
    };
  });
</script>

Any help would be appreciated!

[kpcollier]

Easy fix. I used the CSS only solution and just closed the content div at the bottom of my datapage, and it scrolls through all fields now.