在滚动父页面上显示 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，默认设置为不显示）时滚动主页以从不显示更改为显示块。

这里和我想要的Scroll demo一模一样，试着滚动到底部。

这是我的解决方案。

$(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

以下代码在页面加载时绑定。当#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

Answer 2

如果我正确理解您的问题，为了使 div adform-outstrem 淡入，您首先必须了解 div 是否在视野内。捎带myfunkyside回答here。另外，我建议使用 fadeTo，因为 fadeOut 会从页面中删除元素 as said here

$(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);}
      }

})