0

I want to check if the element is on the screen. It MUST NOT involve any kind of scrolling. I just want to check if the element is on the screen. I have tried different codes out there. They work perfectly fine on Desktops but not on mobile phones.

This is my current code: 

var wScroll = $(this).scrollTop();

if(wScroll > $('.services').offset().top - ($(window).height() / 1.2)) {

    $('.jstransitiononservices').each(function(i){

      setTimeout(function(){
      $('.jstransitiononservices').eq(i).addClass('is-showing');
      }, 150 * (i+1));  

    });

}
Umer Javed
  • 404
  • 6
  • 17

1 Answers1

0

You can use Element.getBoundingClientRect() method on window scroll and you can look for top property of the returned object: 

$(document).ready(function() {
  var target = $('.services')[0].getBoundingClientRect();
  console.log(target, $(window).scrollTop());
  if (target.top <= $(window).scrollTop()) {
    $('pre').html('Element is in view.');
  }
});
body {
  margin: 0;
  padding: 0;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='services'>services div</div>
<pre></pre>

This one with scroll: 

$(window).scroll(function() {
  var target = $('.services')[0].getBoundingClientRect();
  console.log(target, window.innerHeight);
  if (target.top <= $(window).scrollTop() && target.bottom <= window.innerHeight) {
    $('pre').html('Element is in view.');
  }
}).scroll(); // <----this triggers scroll on page load.
body {
  margin: 0;
  padding: 0;
  height:800px;
}
.services{margin:500px 0 0 0; border:solid 1px red;}
pre{position:fixed; left:0; top:0; width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='services'>services div</div>
<pre></pre>
Jai
  • 74,255
  • 12
  • 74
  • 103
  • It works if the element is in view on page refresh. What if it gets into the view while using the website? – Umer Javed Feb 12 '16 at 10:26
  • I meant I want to check if the element is already in view on page refresh or someone scroll to that too. – Umer Javed Feb 12 '16 at 10:27
  • @UmerJaved then this can be used in `.scroll()` event. – Jai Feb 12 '16 at 10:28
  • but then it only checks for the trigger when someone scrolls. – Umer Javed Feb 12 '16 at 10:30
  • You can use a trailing `.scroll()` see other snippet to see. – Jai Feb 12 '16 at 10:38
  • THis is my code. Please tell what changes should I make. – Umer Javed Feb 12 '16 at 10:40
  • You can also add your html markup in your fiddle and reproduce the issue you are getting. – Jai Feb 12 '16 at 10:43
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/103279/discussion-between-umer-javed-and-jai). – Umer Javed Feb 12 '16 at 10:44
  • Sorry javed chat is disabled in here, can't help you on it. – Jai Feb 12 '16 at 10:45
  • actually I have two platforms to open my site. one is desktop and other is mobile when websites load on desktop it works perfectly fine. but when I open my site on mobile the event is not triggered because when you're from the desktop. That element is not in the view so everyone has to scroll down. so the trigger gets triggered but when you're from the mobile. that element is already in the view. and you have to scroll down a little bit then that trigger gets triggered Please go to the website from mobile to understand the issue more clearly. umerjaved1.base.pk – Umer Javed Feb 12 '16 at 10:57