I have a requirement to fix vue datatable table headers on vertical scroll and unfix the same while horizontal scroll in a Visualforce Page

Currently, using floattable plugin, I am able to fix headers in vertical scroll. But it also keeps the headers fixed on horizontal scroll. Is there any tricky way through apex or javascript for me to achieve that?


 $(document).ready(function () {
        var $table = $('.maintable table');       
              scrollContainer: function ($table) {

                    return $table.closest('.maintable');                   

I found below JQuery code to identify the scroll event. But confused about how to use it. Can someone please help with a way out? Scroll event type

 var prevLeft = 0;
    $('#content').scroll( function(evt) {
        var currentLeft = $(this).scrollLeft();
        if(prevLeft != currentLeft) {
            prevLeft = currentLeft;
            console.log("I scrolled vertically.");

put on hold as off-topic by glls, David Reed, Pranay Jaiswal, Martin Lezer, codeyinthecloud Jan 14 at 15:29

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Programming questions not specific to Salesforce are off-topic here, but can be asked on Stack Overflow." – David Reed, Pranay Jaiswal, Martin Lezer, codeyinthecloud
If this question can be reworded to fit the rules in the help center, please edit the question.