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

的CSS：

.stickyColumn1 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.unstickyColumn2 {
    width: 100%;
    padding-left: 33.4%;
}

左侧图像粘贴，右侧滚动Wordpress和Waypoints

1 个答案: