Cfrgtkky

So I've been learning javascript for 2 months now and I decided to make a scroll thing where when you scroll the page you get more content (more paragraphs in div). I watched tutorial on youtube and did something like that but it doesn't work as i expected. At first it looks like it works but i noticed that i don't need to scroll down(or to scroll to bottom) to load more content but can go scroll up as well. To save you some time (if not interested in reading whole script) this is what i am checking (code near the end of the script):

 $(window).scrollTop() + $(window).height() > $("#load_data").height()

Which is in Vanilla JS from my understanding this:

 window.innerHeight + window.scrollY > document.querySelector('#load_div').offsetHeight

scrollTop() and scrollY should return(or set) value of pixels from the top of window(in this case) scrolled. Then we add inner height of window. Here is what i don't understand then, Shouldn't those 2 always be bigger then the divs height? So that explains why wherever i scroll it triggers. But how to set this up so it only triggers when i am at the bottom or near it? Here is full code (without php response part which only returns paragraph that got data from database):

            <div id="load_data"></div>

            <div id="load_data_message"></div>



        </div>



        <script>

            $(document).ready(function(){

            var limit = 8;

            var start = 0;

            var action = 'inactive';

                function load_data(limit, start){



                    $.ajax({

                        url: 'infinitload.php',

                        method: 'POST',

                        data: {limit: limit, start: start},

                        cache: false,

                        success: function(data){

                            $('#load_data').append(data);  //Appending data;



                        if(data == ''){ 

                        $('#load_data_message').html('<button>No results found</button>');

                        action = 'active';//if

                        }else{

                           $('#load_data_message').html('<button>Loading Content</button>');

                           action = 'inactive';

                        }//else



                        }//success

                    })//ajax      

                }//load_data()



                //Loading for the first time

            if(action == 'inactive'){

                action = 'active';

                load_data(limit, start);

            }



            $(window).scroll(function(){

             if( $(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive'){

                 $('button:contains("Loading Content")').toggle();

                 action = 'active';

                 start = start + limit;

                 setTimeout(function(){

                     load_data(limit, start);

                 }, 1500);

             }

            });

        });//dom ready



        </script>





    </body>

UPDATE:
I tried code like this http://jsfiddle.net/nick_craver/gWD66/
which totally makes sense and it works in example there but not in my case. Confused. It's probably something else leading to my problem so i ll try to look into my code again. Thanks for all replies.

Try to replace

$("#load_data").height()

with

$("#load_data").offset().top

Problem is finally fixed. I forgot html DOCTYPE thing. Never got annoyed more :)