CODEWITHSUNDEEP
jqueryhtml
Muhammad Awais
Muhammad Awais

Reputation: 513

Page Scroll to Certain Element Trigger Event

I want to Run Animation when page scroll to certain element. This is working fine. But the main Problem is that Animation runs again and again. I want to run animation only once.

Here is the code i am using as reference.

HTML

<div>Scroll Down</div>
<h1 id="scroll-to">I am The H1</h1>

JS

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
     alert('you have scrolled to the h1!');
   }
});

CSS

div {
    height:800px;
    background:red;
}


http://jsfiddle.net/n4pdx/

Upvotes: 0

Views: 54

Answers (2)

Benito103e
Benito103e

Reputation: 370

You can put a flag when you have already animate the scroll :

var scrolled = false;

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
    if(!scrolled){
        scrolled = true;
        alert('you have scrolled to the h1!');
    }
    }
    else{
        scrolled = false;
    }
});

In this example, I reset the flag when user go up.

Upvotes: 1

Pratik Deshmukh
Pratik Deshmukh

Reputation: 308

Set flag when user scrolls to particular div. Like :

var flag = true;
$(window).scroll(function() {

   var hT = $('#scroll-to').offset().top,
   hH = $('#scroll-to').outerHeight(),
   wH = $(window).height(),
   wS = $(this).scrollTop();
   console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH) && flag){
     alert('you have scrolled to the h1!');
     flag = false;
  }
});

Upvotes: 0

Related Questions