Make left side image sticky while right side scrolls with WordPress and Waypoints

I’m designing a website with WordPress and the Divi theme. I would like there to be a 2 column section with an image on the left, and text on the right. When the image gets to the top of the viewport, I’d like the image to be be 100% of the viewport height and stick, while the right side continues to scroll until the next section.

http://newbcs.bigcityswing.com/groupclasstest

Here is what I have so far:

    <script type="text/javascript">
    (function($) {
          if ( $.fn.waypoint ) {
             var $waypoint_selector,
                $waypoint_selector = $('#top-section'),
                $site_header = $('#main-header'),
                $fixed_column = $('#stickySection .stickyColumn1'),
                $non_fixed_column = $('#stickySection .unstickyColumn2'),
                $offset = $site_header.height() + 
    $waypoint_selector.height();
                console.log($offset);
             $waypoint_selector.waypoint( {
                handler : function( direction ) {
                   if ( direction === 'down' ) {
                      $fixed_column.addClass( 'wpc-fixed-column' );
                      $non_fixed_column.addClass('wpc-non-fixed-column')
                      console.log('down');
                   } else {
                      $fixed_column.removeClass( 'wpc-fixed-column' );
                      $non_fixed_column.removeClass('wpc-non-fixed-column')
                      console.log('up');
                   }
                 },
                offset: -$offset
              } );
          }
    })(jQuery)

And CSS:

     .wpc-fixed-column {
            position: fixed;
            top: 0;
             }
     .unstickyColumn2.wpc-non-fixed-column {
                left: 33.333%;
            }

I can’t get anything to happen, and when I look at the console in Chrome, I get this:
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

Any help would be really appreciated.

Thanks

Read more here: Make left side image sticky while right side scrolls with WordPress and Waypoints

Leave a Reply

Your email address will not be published. Required fields are marked *