На родительской странице прокрутки покажите элемент div css или javascript

Question

У меня есть виджет, который пользователь может использовать на своем веб-сайте, вставив код javascript, как показано ниже.

Код:

  <div id="adform-outstream" class="vmwp-v1">

            <script>

                (function (w,d,s,o,f,js,fjs) {

                    w['JS-Widget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
                    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
                    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
                }(window, document, 'script', 'mw', 'http://localhost/videomill-dashboard/dist/bundle.js'));

            </script>
        </div>

Теперь я хотел бы прокрутить главную страницу, когда пользователь обогащает div (adform-outstream, который по умолчанию настроен на отображение нет), чтобы перейти от отображения нет для отображения блока.

Вот что я хочу Демонстрация прокрутки точно так же, попробуйте прокрутить до конца.

Вот мое решение.

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 800) {
        $('#adform-outstream').fadeIn();
    } else {
        $('#adform-outstream').fadeOut();
    }

});

Теперь мое решение работает только тогда, когда высота больше 800, но я хочу, чтобы пользователь обогащал указанный div adform-outstream, потому что теперь, если высота меньше 800, он удалит div

Что мне нужно сделать, чтобы решить мою проблему?

Answer 1

Если я правильно понимаю ваш вопрос, для того, чтобы div adform-outstrem исчез в вашей первой, вы должны понять, находится ли div в поле зрения. Спекуляция с myfunkyside ответ здесь . Кроме того, я бы рекомендовал использовать fadeTo, так как fadeOut удаляет элемент со страницы , как сказано здесь

$(document).scroll(function () {
    var y = $(this).scrollTop() + $(this).innerHeight();

      var objectBottom =   $('#adform-outstream').offset().top + $(this).outerHeight();

      if (objectBottom <y) {
     if ( $('#adform-outstream').css("opacity")==0) { $('#adform-outstream').fadeTo(500,1);}
      } else { 
        if ( $('#adform-outstream').css("opacity")==1) { $('#adform-outstream').fadeTo(500,0);}
      }

})

Answer 2

Следующий код привязан к загрузке страницы. Когда прокручивается #adform-outstream, мы добавляем к нему класс и видим его визуально. Я использовал CSS для перехода, но вы можете справиться с этим так, как считаете нужным. Одной из важных деталей является удаление прослушивателя прокрутки после достижения триггера прокрутки. В противном случае он будет продолжать стрелять и замедлять ход событий.

$(window).scroll(scrollHandler);
var scrollToElement = "#adform-outstream";

function scrollHandler() {
  function elementScrolled(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
  }

  if (elementScrolled(scrollToElement)) {
   	$(scrollToElement).addClass("show");
    
    // Important: remove scroll handler
    $(window).off('scroll', scrollHandler);
  }
}

#adform-outstream {
  max-height: 0;
  transition: max-height 0.5s, background-color 2s;
  overflow: hidden;
  padding: 1em;
  background-color: transparent;
}

#adform-outstream.show {
  max-height: 20em;
  background-color: yellow;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="container">
  <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum beatae aliquid libero debitis velit omnis ea perferendis minus et, soluta architecto blanditiis nobis sed, eaque accusantium! Minima, voluptatum, a!</span>
    <span>Odio, repellat placeat non ad neque, harum unde rem officiis sit, sapiente rerum, explicabo. Reiciendis libero tenetur unde repellat. Voluptates est itaque autem quia vitae rerum. Beatae cum, rerum optio.</span>
    <span>Quis necessitatibus cumque eligendi, quibusdam porro nihil, ipsa sapiente soluta neque voluptatem ullam! Culpa obcaecati eaque modi eum tempora voluptatibus distinctio iste delectus aut! Minima dolorem, ducimus dolor error laborum.</span></p>
  <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum beatae aliquid libero debitis velit omnis ea perferendis minus et, soluta architecto blanditiis nobis sed, eaque accusantium! Minima, voluptatum, a!</span>
    <span>Odio, repellat placeat non ad neque, harum unde rem officiis sit, sapiente rerum, explicabo. Reiciendis libero tenetur unde repellat. Voluptates est itaque autem quia vitae rerum. Beatae cum, rerum optio.</span>
    <span>Quis necessitatibus cumque eligendi, quibusdam porro nihil, ipsa sapiente soluta neque voluptatem ullam! Culpa obcaecati eaque modi eum tempora voluptatibus distinctio iste delectus aut! Minima dolorem, ducimus dolor error laborum.</span></p>

  <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum beatae aliquid libero debitis velit omnis ea perferendis minus et, soluta architecto blanditiis nobis sed, eaque accusantium! Minima, voluptatum, a!</span>
    <span>Odio, repellat placeat non ad neque, harum unde rem officiis sit, sapiente rerum, explicabo. Reiciendis libero tenetur unde repellat. Voluptates est itaque autem quia vitae rerum. Beatae cum, rerum optio.</span>
    <span>Quis necessitatibus cumque eligendi, quibusdam porro nihil, ipsa sapiente soluta neque voluptatem ullam! Culpa obcaecati eaque modi eum tempora voluptatibus distinctio iste delectus aut! Minima dolorem, ducimus dolor error laborum.</span></p>

  <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum beatae aliquid libero debitis velit omnis ea perferendis minus et, soluta architecto blanditiis nobis sed, eaque accusantium! Minima, voluptatum, a!</span>
    <span>Odio, repellat placeat non ad neque, harum unde rem officiis sit, sapiente rerum, explicabo. Reiciendis libero tenetur unde repellat. Voluptates est itaque autem quia vitae rerum. Beatae cum, rerum optio.</span>
    <span>Quis necessitatibus cumque eligendi, quibusdam porro nihil, ipsa sapiente soluta neque voluptatem ullam! Culpa obcaecati eaque modi eum tempora voluptatibus distinctio iste delectus aut! Minima dolorem, ducimus dolor error laborum.</span></p>

  <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum beatae aliquid libero debitis velit omnis ea perferendis minus et, soluta architecto blanditiis nobis sed, eaque accusantium! Minima, voluptatum, a!</span>
    <span>Odio, repellat placeat non ad neque, harum unde rem officiis sit, sapiente rerum, explicabo. Reiciendis libero tenetur unde repellat. Voluptates est itaque autem quia vitae rerum. Beatae cum, rerum optio.</span>
    <span>Quis necessitatibus cumque eligendi, quibusdam porro nihil, ipsa sapiente soluta neque voluptatem ullam! Culpa obcaecati eaque modi eum tempora voluptatibus distinctio iste delectus aut! Minima dolorem, ducimus dolor error laborum.</span></p>

  <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum beatae aliquid libero debitis velit omnis ea perferendis minus et, soluta architecto blanditiis nobis sed, eaque accusantium! Minima, voluptatum, a!</span>
    <span>Odio, repellat placeat non ad neque, harum unde rem officiis sit, sapiente rerum, explicabo. Reiciendis libero tenetur unde repellat. Voluptates est itaque autem quia vitae rerum. Beatae cum, rerum optio.</span>
    <span>Quis necessitatibus cumque eligendi, quibusdam porro nihil, ipsa sapiente soluta neque voluptatem ullam! Culpa obcaecati eaque modi eum tempora voluptatibus distinctio iste delectus aut! Minima dolorem, ducimus dolor error laborum.</span></p>


  <div id="adform-outstream">adform-outstream adform-outstream adform-outstream adform-outstream adform-outstream </div>

  <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum beatae aliquid libero debitis velit omnis ea perferendis minus et, soluta architecto blanditiis nobis sed, eaque accusantium! Minima, voluptatum, a!</span>
    <span>Odio, repellat placeat non ad neque, harum unde rem officiis sit, sapiente rerum, explicabo. Reiciendis libero tenetur unde repellat. Voluptates est itaque autem quia vitae rerum. Beatae cum, rerum optio.</span>
    <span>Quis necessitatibus cumque eligendi, quibusdam porro nihil, ipsa sapiente soluta neque voluptatem ullam! Culpa obcaecati eaque modi eum tempora voluptatibus distinctio iste delectus aut! Minima dolorem, ducimus dolor error laborum.</span></p>



</div>

jsFiddle