Load javascript into div when user scroll position reaches it

Question

I want to make the script load into the div only when user reaches it. I am trying to accomplish this using jQuery, but no success. Maybe you can help. Here is the code:

var scrollFromTop = $("#float_div_id").offset().top;

$(document).scroll(function () {
    if ($(this).scrollTop() > scrollFromTop) {
        var s = document.createElement('script');
        s.setAttribute('type', 'text/javascript');
        s.src = 'javascript code src which i want to append on scroll';
        document.getElementById('float_div_id').appendChild(s);
    }
});

Just a side question: why would you create a script element inside the DOM? is it so heavy that you can't include it first? — briosheje
– briosheje, Commented Apr 29, 2015 at 12:33
Basically the div is empty. I want to append the script which will load the content inside that div. I do not want to load that script until user reaches the div and when the user reaches it, i want to load the script inside that particular div. — Pandemum
– Pandemum, Commented Apr 29, 2015 at 12:35
Why don't you just implement a function that, when the user scrolls that div, load the content you need? I mean, I'm not getting why you would load a script instead of the content. — briosheje
– briosheje, Commented Apr 29, 2015 at 12:38
What is not working? Add a console.log to check if ever the scrollTop() value goes beyond the offset. — anpsmn
– anpsmn, Commented Apr 29, 2015 at 12:39
@briosheje Can you please give me a simple example of jsfiddle how to do that ? — Pandemum
– Pandemum, Commented Apr 29, 2015 at 12:42

Pramod Karandikar · Accepted Answer · 2015-04-29 12:46:01Z

1

In your case, $(this).scrollTop() would be coming out to be lesser than scrollFromTop.

Change your if condition to this and try again :

if ($(this).scrollTop() + $(window).height()  > scrollFromTop)

answered Apr 29, 2015 at 12:46

Pramod Karandikar

5,3377 gold badges45 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pandemum Over a year ago

The problem in my case is that console.log gives me message that i have scrolled to the particular point, but the content is not being loaded.

sebastienbarbier · Accepted Answer · 2015-04-29 14:07:45Z

0

You should give a look at waypoint library. It trigger an event when user scroll on a specific element and them you can execute some coding (tempting ?)

var waypoint = new Waypoint({
  element: document.getElementById('thing'),
  handler: function(direction) {
    alert('You have scrolled to a thing')
  }
})

Then after scrolling, you should use $.getScript() with a separate JS file :

Description: Load a JavaScript file from the server using a GET HTTP request, then execute it.

$.getScript('/javascript/myscript.js');

And be careful about using asynchronous if some code require your new js file :

$.getScript('/javascript/myscript.js', function() {
    // do something here
});

let me know if this work for you :D

edited Apr 29, 2015 at 14:07

answered Apr 29, 2015 at 12:41

sebastienbarbier

6,8624 gold badges34 silver badges57 bronze badges

4 Comments

Pandemum Over a year ago

The problem in my case is that console.log gives me message that i have scrolled to the particular point, but the content is not being loaded.

sebastienbarbier Over a year ago

Are you trying to put HTML or Javascript code in your 'float_div_id' ?

Pandemum Over a year ago

I am trying to load javascript

sebastienbarbier Over a year ago

Since you seems to use jQuery, you should give a try with $.getScript() :D. I will update my answer including this solution !

Collectives™ on Stack Overflow

Load javascript into div when user scroll position reaches it

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related