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

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