Kullanıcı jQuery ile belirli bir öğeye kaydırdığında olayı tetikleyin

Bir sayfanın çok altında bir h1 var ..

<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>

ve kullanıcı h1'e kaydırdığında veya tarayıcının görünümünde bulundurduğunda bir uyarı tetiklemek istiyorum.

$('#scroll-to').scroll(function() {
     alert('you have scrolled to the h1!');
});

Bunu nasıl yaparım?

offsetÖğenin scrolldeğerini hesaplayabilir ve ardından bunu aşağıdaki gibi değerle karşılaştırabilirsiniz :

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

Bu Demo Fiddle'ı kontrol edin

Güncellenmiş Demo Fiddle uyarı yok - bunun yerine öğeyi FadeIn ()

Öğenin görünüm alanının içinde olup olmadığını kontrol etmek için kod güncellendi. Böylece, bu, yukarı veya aşağı kaydırıp, if ifadesine bazı kurallar ekleyerek çalışır:

   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
       //Do something
   }

Demo Fiddle

Bu soruyu, bir kullanıcı sayfanın belirli bir bölümünü kaydırdığında jQuery tetikleme eyleminden gelen en iyi yanıtla birleştirmek

var element_position = $('#scroll-to').offset().top;

$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = element_position;

    if(y_scroll_pos > scroll_pos_test) {
        //do stuff
    }
});

GÜNCELLEME

Kodu iyileştirdim, böylece öğe ekranın en tepesinden çok ekranın yarısına geldiğinde tetiklenecek. Ayrıca, kullanıcı ekranın altına vurursa ve işlev henüz çalıştırılmadıysa kodu tetikleyecektir.

var element_position = $('#scroll-to').offset().top;
var screen_height = $(window).height();
var activation_offset = 0.5;//determines how far up the the page the element needs to be before triggering the function
var activation_point = element_position - (screen_height * activation_offset);
var max_scroll_height = $('body').height() - screen_height - 5;//-5 for a little bit of buffer

//Does something when user scrolls to it OR
//Does it when user has reached the bottom of the page and hasn't triggered the function yet
$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;

    var element_in_view = y_scroll_pos > activation_point;
    var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

    if(element_in_view || has_reached_bottom_of_page) {
        //Do something
    }
});

Bence en iyi bahsiniz, tam da bunu yapan mevcut bir kütüphaneden yararlanmak olacaktır:

http://imakewebthings.com/waypoints/

Öğelerinize, öğeniz görüntü alanının üst kısmına ulaştığında tetiklenecek dinleyiciler ekleyebilirsiniz:

$('#scroll-to').waypoint(function() {
 alert('you have scrolled to the h1!');
});

Kullanımda olan harika bir demo için:

http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/

Inview kütüphanesi olayı tetikledi ve jquery 1.8 ve üstü ile iyi çalışıyor! https://github.com/protonet/jquery.inview

$('div').on('inview', function (event, visible) {
  if (visible == true) {
    // element is now visible in the viewport
  } else {
    // element has gone out of viewport
  }
});

Bunu okuyun https://remysharp.com/2009/01/26/element-in-view-event-plugin

Bunu tüm cihazlar için kullanabilirsin,

$(document).on('scroll', function() {
    if( $(this).scrollTop() >= $('#target_element').position().top ){
        do_something();
    }
});

Başarılı bir kaydırmadan sonra yalnızca bir kez kaydırma yapın

Kabul edilen cevap benim için işe yaradı (% 90) ancak aslında yalnızca bir kez ateş etmek için biraz ince ayar yapmak zorunda kaldım.

$(window).on('scroll',function() {
            var hT = $('#comment-box-section').offset().top,
                hH = $('#comment-box-section').outerHeight(),
                wH = $(window).height(),
                wS = $(this).scrollTop();

            if (wS > ((hT+hH-wH)-500)){
                console.log('comment box section arrived! eh');
                // After Stuff
                $(window).off('scroll');
                doStuff();
            }

        });

Not : Başarılı kaydırma derken, kullanıcının öğeme kaydırdığını veya başka bir deyişle öğem görüntülendiğinde kastım.

JQuery eklentisini aşağıdaki inviewgibi olayla kullanabilirsiniz :

jQuery('.your-class-here').one('inview', function (event, visible) {
    if (visible == true) {
      //Enjoy !
    }
});

Bağlantı: https://remysharp.com/2009/01/26/element-in-view-event-plugin

İhtiyacın olan şey bu olmalı.

Javascript:

$(window).scroll(function() {
    var hT = $('#circle').offset().top,
        hH = $('#circle').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    console.log((hT - wH), wS);
    if (wS > (hT + hH - wH)) {
        $('.count').each(function() {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 900,
                easing: 'swing',
                step: function(now) {
                    $(this).text(Math.ceil(now));
                }
            });
        }); {
            $('.count').removeClass('count').addClass('counted');
        };
    }
});

CSS:

#circle
{
    width: 100px;
    height: 100px;
    background: blue;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    float:left;
    margin:5px;
}
.count, .counted
{
  line-height: 100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
#talkbubble {
   width: 120px;
   height: 80px;
   background: green;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
   float:left;
   margin:20px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 15px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 20px solid green;
   border-bottom: 13px solid transparent;
}

HTML:

<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<div id="circle"><span class="count">1234</span></div>

Bu bootply'yi kontrol edin: http://www.bootply.com/atin_agarwal2/cJBywxX5Qp

Intersection Observer en iyi şey IMO olabilir, herhangi bir harici kütüphane olmadan gerçekten iyi bir iş çıkarır.

const options = {
            root: null,
            threshold: 0.25, // 0 - 1 this work as a trigger. 
            rootMargin: '150px'
        };

        const target = document.querySelector('h1#scroll-to');
        const observer = new IntersectionObserver(
           entries => { // each entry checks if the element is the view or not and if yes trigger the function accordingly
            entries.forEach(() => {
                alert('you have scrolled to the h1!')
            });
        }, options);
        observer.observe(target);

Kaydırma konumuna dayalı çok sayıda işlevsellik yapıyorsanız, Kaydırma büyüsü ( http://scrollmagic.io/ ) tamamen bu amaç için oluşturulmuştur.

Kullanıcı kaydırma sırasında belirli öğelere ne zaman eriştiğine bağlı olarak JS'yi tetiklemeyi kolaylaştırır. Paralaks kaydırma web siteleri için harika olan GSAP animasyon motoruyla ( https://greensock.com/ ) da entegre olur.

Bazen cihazın görüntü alanının sınırlarının ötesine geçebilen öğelerle uğraşan herkes için DaniP'nin cevabında hızlı bir değişiklik.

Küçük bir koşul eklendi - Görüntü alanından daha büyük öğeler söz konusu olduğunda, öğe, üst yarısı görüntü alanını tamamen doldurduğunda ortaya çıkacaktır.

function elementInView(el) {
  // The vertical distance between the top of the page and the top of the element.
  var elementOffset = $(el).offset().top;
  // The height of the element, including padding and borders.
  var elementOuterHeight = $(el).outerHeight();
  // Height of the window without margins, padding, borders.
  var windowHeight = $(window).height();
  // The vertical distance between the top of the page and the top of the viewport.
  var scrollOffset = $(this).scrollTop();

  if (elementOuterHeight < windowHeight) {
    // Element is smaller than viewport.
    if (scrollOffset > (elementOffset + elementOuterHeight - windowHeight)) {
      // Element is completely inside viewport, reveal the element!
      return true;
    }
  } else {
    // Element is larger than the viewport, handle visibility differently.
    // Consider it visible as soon as it's top half has filled the viewport.
    if (scrollOffset > elementOffset) {
      // The top of the viewport has touched the top of the element, reveal the element!
      return true;
    }
  }
  return false;
}

Bunu her zaman yaparken aynı kodu kullanıyorum, bu yüzden bunu yapan basit bir jquery eklentisi ekledim. 480 bayt uzunluğunda ve hızlı. Çalışma zamanında yalnızca bağlı öğeler analiz edilir.

https://www.npmjs.com/package/jquery-on-scrolled-to

Olacak $('#scroll-to').onScrolledTo(0, function() { alert('you have scrolled to the h1!'); });

veya h1'in yarısı gösterildiğinde uyarmanız gerekiyorsa 0 yerine 0,5 kullanın.