Wordpressとウェイポイントで右側のスクロールをしながら左側の画像を貼り付けます。

Question

WordpressとDiviのテーマでウェブサイトをデザインしています。私は、左側に画像を、右側にテキストを持つ2列のセクションがあることを望みます。画像がビューポートの一番上に来ると、画像はビューポートの高さの100％になるようにし、右側は次のセクションまでスクロールし続けます。ここで

http://newbcs.bigcityswing.com/groupclasstest

私がこれまで持っているものです。

<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) 

とCSS：

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

私が起こるために何かを得ることができない、と私は、コンソールを見たときChromeで、私はこれを取得します： パッシブとして扱われるターゲットのために受動的なイベントリスナー内のデフォルトを防ぐことができません。 https://www.chromestatus.com/features/5093566007214080

ご協力いただければ幸いです。

おかげ

Answer 1

1. CSS：そこ

   .stickyColumn1 { 
       position: fixed; 
       top: 0; 
       left: 0; 
       z-index: 1; 
   } 
   
   .unstickyColumn2 { 
       width: 100%; 
       padding-left: 33.4%; 
   }