Question

我创建了以下功能，其中在滚动内容时左侧修复了图像，并且引号显示为几个像素。

它正常工作，唯一的问题是我想在同一页面上多次添加，并且就像它一样，它只适用于第一张图片。

滚动时第二个不固定，引号保持隐藏...

如何为每张图片运行此功能？

HTML：

<section id="cont_quote" class="maxwidth">
    <article class="cont_q hasImage">
        <p>Content</p>
        <img class="alignleft img_quote" src="/large.jpg" alt="" width="433" height="553" />
       <blockquote>
          <h3>Why this training plan works</h3>
       </blockquote>
       <p>Content</p>
    </article>
</section>

JS：

// Stick image on scroll 
    $(window).on('load resize', function () {
        if ($(window).width() >= 769) {
          var $element = $('#cont_quote');
          var $follow = $element.find('.img_quote');
          var followHeight = $element.find('.img_quote').outerHeight();
          var height = $element.outerHeight() - 300;
          var window_height = $(window).height();

          $(window).scroll(function () {
            var pos = $(window).scrollTop();
            var top = $element.offset().top;

            // Check if element is above or totally below viewport
            if (top + height - followHeight < pos || top > pos + window_height) {
              return;
            }

            var offset = parseInt($(window).scrollTop() - top);

            if (offset > 0) {
            $follow.css('transform', 'translateY('+ offset +'px)');
            }

          })
        }
    });


    // Quote show on viewport
    function inViewport( element, viewport = { top: 0, bottom: innerHeight } ){

      // Get the elements position relative to the viewport

      var bb = element.getBoundingClientRect();

      // Check if the element is outside the viewport
      // Then invert the returned value because you want to know the opposite

      return !(bb.top > viewport.bottom || bb.bottom < viewport.top);

    }

    var myViewport = { top: innerHeight * .5, bottom: innerHeight * .6 };
    var myElement = document.querySelector( '#cont_quote blockquote' );

    // Listen for the scroll event

    document.addEventListener( 'scroll', event => {


    // Check the viewport status
    if( $(window).width() >= 600 ){

      if( inViewport( myElement, myViewport ) && $('.cont_q').hasClass('hasImage') ) {

        if( $(window).width() >= 769 ){
          myElement.style.opacity = 1;
          myElement.style.left = '-25%';

        } else {
          myElement.style.opacity = 1;
          myElement.style.left = '-5%';
        }

       } else if( inViewport( myElement, myViewport )) {

        if( $(window).width() >= 769 ){
          myElement.style.opacity = 1;
          myElement.style.left = '-15%';

        } else {
          myElement.style.opacity = 1;
          myElement.style.left = '13%';
        }

      } else {

        myElement.style.opacity = 0;
        myElement.style.left = '-40%';
      }   

    } else {

        myElement.style.opacity = 1;
        myElement.style.left = '5%';
    } 

    });

在同一页面上为每个重复的课程运行函数

0 个答案: