Fix Web Part on the top of the page

Question

I have 2 web parts on my AllItems.aspx page (one HTML Form web part & one list view). I want to fix the HTML web part on the top of the page, so that it is also visible on scrolling the page down. The other webpart (list view) should begin below the html webpart and should be scrollable (as normal). Can someone help?

EDIT: Actual Code & Problem

I could fix the html web part and show the list view below with the following code:

$(document).ready(function () {
  $("#MSOZoneCell_WebPartWPQ3").css("position", "fixed");
  var marginNew = $("#MSOZoneCell_WebPartWPQ3").outerHeight() * 1.5;
  $("#MSOZoneCell_WebPartWPQ2").css("margin-top", marginNew + "px");
});

The problem now is, that on scrolling the two web parts overlap!

EDIT 2: New attempt

With the following code I can fix "normal" HTML elements, like divs. But the logic won't work for my webpart-containing SP page!

$('#s4-workspace').on('scroll', function() {
    var pos = $('#s4-workspace').scrollTop();
    if(pos > webPartPosition) {
        document.getElementById("MSOZoneCell_WebPartWPQ3").style.top = pos + "px";
    } else {
        document.getElementById("MSOZoneCell_WebPartWPQ3").style.top = webPartPosition + "px";
    }
});

I guess that I can't make position settings, because the listview web part follows below and prevents the upper one to be able to move.

Answer 1

I found the following work-around:

As the webpart I want to fix is the topmost webpart of the page, I did it the other way round: Instead of fixing its position, I've shorten the size of the listview webpart, as I only want to be viewed below the fixed HTML webpart.

So when I set the size depending on the size of the whole page content (s4-workspace) and added scrollbars to it, the site is shown as I wanted to. The upper section the List title and the HTML webpart is visible, and below and only below the listview webpart follows.

To do that I added an Content Editor Webpart (id MSOZoneCell_WebPartWPQ4) with the following code pieces

• CSS: Show scrollbars for the HTML webpart, hide the Content Editor webpart & hide scrollbars of the page content (s4-workspace)
• Logic for resizing the page (browser window)
• Timer (waitForFinalEvent) for awaiting the finishing of the resize, source: https://stackoverflow.com/a/4541963/4846215

Here the Content Editor webpart's code:

<script src="/SiteAssets/jquery-1.12.0.js" type="text/javascript"></script>

<style>
  #WebPartWPQ2{
    overflow:scroll;
  }
  #MSOZoneCell_WebPartWPQ4 {
    display:none;
  }
  #s4-workspace {
    overflow:hidden;
  }
</style>

<script> 
  $(window).resize( function() {
    waitForFinalEvent(function(){
        var newHeight = $("#s4-workspace").height() - $("#WebPartWPQ2").position().top;
        var newWidth = $("#s4-workspace").width() - $("#WebPartWPQ2").position().left;

        $("#WebPartWPQ2").height(newHeight + "px");
        $("#WebPartWPQ2").width(newWidth + "px");
    }, 500, "resizeTimer");
  });

  var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
            clearTimeout (timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
    };
  })();
</script>