Simple way to load part of the page only if users scrolls down?

all know http://www.appelsiini.net/projects/lazyload to load images when users scrolls down. But what about part of the page too?

Consider You have a page with some text on the top page (always shown), scrolling down you have a lot of select area (with lots of elements inside <option>element 3421</option> etc) + other various element.

Would be possibile to load parts of the page (including for ex开发者_如何学运维ample those <select>)? How?

---

This sounds like a job for jquery-waypoints, if you're just interested in adding functionality at a certain point.

---

Not trying to steal @Frederik's thunder - he answered correctly first, I just can't easily describe the code needed to explain my comment to @yes123 in another comment.

So presuming that you have a long page with a select list near the very bottom (e.g. as part of a contact form on a blog post with lots n lots of comments.

So presume this content is at the very end of the page:

<div id="commentForm">
  Where did you hear about us?:<select id="refererSite"></select>
  ...all the other regular fields... name, email, comment, etc.
</div>

You can then use the jQuery waypoint plugin to only load the refererSite list of the top 200+ blogs (for example) if and when the user actually scrolls down past all the other comments.

You just need to add the script code...

//when the document has loaded...
$(document).ready(function(){
  //queue up code to execute when the user scrolls down to the contactForm
  $('#contactForm').waypoint(function(){
    //get referer site options - AJAX call...
    $.getJSON('http://myserver.example.com/getReferers.json', function(data){
      var options = [];
      //build up options list
      $.each(data, function(key, val){
        options.push('<option value="' + key + '">' + val + '</option>');
      });
      //add to the select element
      $('#refererSite').html(options.join(''));
    });
  });
});