Want JavaScript script to run when the Div is in the viewport

Question

I want to run a JS script when a particular div comes into the viewport/is visible.

The div will always be visible, but when the user scrolls it in to view.

I have created a JSFiddle with the example:

Example http://jsfiddle.net/sv8boe9u/21/

JS

consoleText(['HELLO,', 'HERE IS A BIT ABOUT ME,', 'ENJOY!'], 'text', ['#333', '#333', '#333']);

function consoleText(words, id, colors) {

  "use strict";
  if (colors === undefined) {
    colors = ['#fff'];
  }
  var visible = true;
  var con = document.getElementById('console');
  var letterCount = 1;
  var x = 1;
  var waiting = false;
  var target = document.getElementById(id);
  target.setAttribute('style', 'color:' + colors[0]);
  window.setInterval(function() {

    if (letterCount === 0 && waiting === false) {
      waiting = true;
      target.innerHTML = words[0].substring(0, letterCount);
      window.setTimeout(function() {
        var usedColor = colors.shift();
        colors.push(usedColor);
        var usedWord = words.shift();
        words.push(usedWord);
        x = 1;
        target.setAttribute('style', 'color:' + colors[0]);
        letterCount += x;
        waiting = false;
      }, 1000);
    } else if (letterCount === words[0].length + 1 && waiting === false) {
      waiting = true;
      window.setTimeout(function() {
        x = -1;
        letterCount += x;
        waiting = false;
      }, 1000);
    } else if (waiting === false) {
      target.innerHTML = words[0].substring(0, letterCount);
      letterCount += x;
    }
  }, 120);
  window.setInterval(function() {
    if (visible === true) {
      con.className = 'console-underscore hidden';
      visible = false;

    } else {
      con.className = 'console-underscore';

      visible = true;
    }
  }, 400);
}

To clarify, I want it to start at 'Hello' when it is actually in viewport. Any ideas?

Thanks.

Add a [listener for scroll events](https://developer.mozilla.org/en-US/docs/Web/Events/scroll) and [check the scroll position against the elem you want to animate](https://stackoverflow.com/questions/4096863/how-to-get-and-set-the-current-web-page-scroll-position) — ggorlen, Jun 04 '18 at 23:25

scotty3 · Answer 1 · 2018-06-07T17:05:58.227

3

Using the jQuery scroll() and scrollTop() functions you can specify a height in px that triggers another function when reached such as:

$(window).scroll(function () {
    if ($(this).scrollTop() >= 50) {   // If page is scrolled more than 50px
        doSomething();                // call this function
    } 
});

jQuery Scroll and Scroll Top

edited Jun 07 '18 at 17:05

answered Jun 04 '18 at 23:28

scotty3

153
8

Newtorn Moses · Answer 2 · 2018-06-04T23:50:43.423

you can use the scroll function ..like create a function that runs until wen you reach that element u are targeting.. then call the alert('hello');

window.addEventListener('scroll', (e) => {

        console.log(window.scrollY)
        if (window.scrollY == 705) {
            alert('got ya')
            // do your stuff here boss
        }
    })

you should make sure to find that scroll position wen yo element comes into view and then put it wr 705 is.. hope this helps ya

Want JavaScript script to run when the Div is in the viewport

2 Answers2