CODEWITHSUNDEEP
jquery
sdfgg45
sdfgg45

Reputation: 1242

How to trigger scroll on spesific element or div?

I have some code that allows me to check my position on site, and then allows me to do somthing..example to show more blogposts on the page.

<section class="bg-grey" id="category">
    <div class="container">
        <div class="row">
            <div class="main col-md-12" id="category">
                <div id="posts"></div>
                <p id="loading" class="text-center">
                    <img src="/images/bx_loader.gif" alt="Loading…" />
                </p>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</section>

jquery code here:

var start_index = 0;
var products_to_show = 6;

var win = $(window);
win.scroll(function() {

    if ($(document).height() - win.height() == win.scrollTop()) {

        $('#loading').show();

        if(start_index < max_items){

            var datax = {
                'start_index' : start_index
            };

            $.ajax({
                url: '/ajax-includes/get-post.php',
                data:datax,
                type: 'POST',
                success: function(html) {
                    $(html).hide().fadeIn(1000).appendTo('#posts');
                    $('#loading').hide();
                }
            });
            start_index = start_index + products_to_show;
        }else{
            $('#loading').hide();
        }
    }
});

here is the code for getpost.php

<div class="item col-sm-4 col-lg-4 col-md-4 col-xs-6 scroll">
    <div class="product">
        load blogstuff here
    </div>
</div>

When i scroll to the bottom the code triggers fine, but only on desktop (bigger screens), on phone i need to scroll to the bottom before this trigger, is there a way to make this trigger on a spesific div? So when div is visable do the same thing, or if anyone have a better way of doing this.

Upvotes: 1

Views: 1045

Answers (1)

Yan Pak
Yan Pak

Reputation: 1867

If you know position of your div then you can do it like:

$(window).scroll(function(){
   var fromTop = $(window).scrollTop();
   var divTop = $('#id of your div').offset().top;
   var divHeight = $('#id of your div').height();
   var winHeight = $(window).height();
   if (fromTop <= divTop && (divTop + divHeight  - winHeight) <= 0) {
      // your div is visible
      // here goes your code
   }
});

Upvotes: 1

Related Questions