On scroll parent page show div element css or javascript

Question

I have a widget that a user can use in his/her own website by inserting a javascript code like this below.

Code:

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

Now I would like on scroll the main page when the user rich the div (adform-outstream which by default is set to display none) to change from display no to display block.

Here is what I want Scroll demo exactly the same, try to scroll to the bottom.

Here is my solution.

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

});

Now my solution works only when the height is greater than 800, but I want when the user riches the specified div adform-outstream because now is if the height is less than 800 it will remove the div

What do I need to do to solve my problem?

Andy Hoffman · Accepted Answer · 2020-02-24T22:27:13.050

The following code is bound on load of the page. When #adform-outstream is scrolled to, we add a class to it and visually reveal it. I used CSS for the transition, but you can handle it however you see fit. One important detail is to remove the scroll listener once the scroll trigger has been reached. Otherwise, it will continue to fire and slow things down.

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

nice solution but I cant have multiple divs , can we solve the problem without using `
`? — The Dead Man, Feb 24 '20 at 22:23
@user9964622 Updated to use only a single element. I removed `scrollTrigger` altogetherl — Andy Hoffman, Feb 24 '20 at 22:28
By using ur solution I have added a video inside a div and changed max-height to 576px when shows in a dom, the problem is now when I just start scrolling it shows the div which is wrong, I want the same as this demo here: https://test.adform.com/banners/video/outstream/preview.html meaning we nead to show the div until we the area where the div is , as the above demo shows — The Dead Man, Feb 24 '20 at 23:59

score 1 · Answer 2 · answered Feb 24 '20 at 21:57

If Im understanding your question correctly, in order for the div adform-outstremto fade in your first must understand if the div is within the field of view. Piggybacking off of myfunkyside answer here. In addition, I would recommend using fadeTo since fadeOut removes the element from the page 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);}
      }

})

Hi darek your solution , shows the div when I pass the below the div , so that is not working , here is what I want : https://test.adform.com/banners/video/outstream/preview.html try to scroll to bottom see what happens — The Dead Man, Feb 24 '20 at 22:16

On scroll parent page show div element css or javascript

2 Answers2