Scrolling single-side column

Hi,
Thank you for the login, in order to make the left column sticky and retain it’s width and position and a fluid feel I recommend using jQuery. So the first step is to add a custom ID to your left column so we are only targeting this one, in the future if to create another page like this with the sticky column on the left and the distance from the top of 330px, you can use the same ID to also target it.

then we will add this code to the end of your functions.php file in Appearance > Editor:

function sticky_column(){
  ?>
  <script>
(function ($) {
    $(window).scroll(function (e) {
      var $sticky = $('#sticky-column');
      var width = $(window).width()
      var position = ($sticky.css('position') == 'fixed');
      if ($(this).scrollTop() > 100 && width >= 767 && !position) {
        $sticky.css({ 'position': 'fixed', 'top': '330px', 'width': $sticky.innerWidth() });
        $sticky.next().css('float', 'right');
        $sticky.addClass('fixed_element_style');
      }
      if ($(this).scrollTop() < 100 && position) {
        $sticky.css({ 'position': 'static', 'top': '0px', 'width': '' });
        $sticky.next().css('float', 'left');
        $sticky.removeClass('fixed_element_style');
      }
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'sticky_column');

Then in your theme settings this option needs to be unchecked: Enfold Theme Options > Performance > Load jQuery in your footer
Now you will see the column is sticky, you may need to clear your browser cache.
The only issue is that you are not using a Child Theme so on your next update this customization will be lost. Please consider reading about child themes and using one.

Best regards,
Mike

Hi,

Thanks for the update. We’ll keep this thread open for you in case you should need any further help.

Best regards,
Rikard

Hi,

Thanks for sharing and for helping out @guenni007 :-)

Best regards,
Rikard