Keeping an element on its x axis but allowing it to scroll on y

Hey Bubblers

I have a unique issue that I can’t seem to solve.

I’m setting up a google sheets type table with the new responsive engine cause now we have easy horizontal scrolling.

But one feature required for this is we can lock certain columns so that when we horizontal scroll the locked columns stay in the fixed position. Now this works fine if you create a position of fixed and wouldn’t need to scroll down but as tables go, we need to scroll down.

I’m comfortable with css and javascript so I’m just wondering if anyone knows how to solve the issue of keeping an element on the x axis as a fixed element but ability to scroll down on the y axis.

Any help is greatly appreciated.

1 Like

I’ve figured out how to fix an element to the x axis in the new responsive. This requires some css,html and javascript knowledge. If you’re savy you could easily alter this to stay on y axis.

If you’ve set up your element as fixed position you can skip this part

If you have a row or column make sure you add an id to the element then in the header set it’s position as fixed “postion: fixed !important;”

If you have a fixed element this is where you’ll start

Make sure you have the toolbox plugin for javascript, in a on page load workflow run javascript and have this code

$(function() {

$(window).scroll(function (event) {

    var y = -($(window).scrollTop() - 145);
    $('#elementsID').css('top',y + 'px');
    
});

});

Where i have 145 make sure this is the distance from the top of the page in the code above make sure this is the distance from the top of the page to your element is. Here I have 145 margin from top. If you add some css for z-index you can make this float over other elements.

1 Like