web-dev-qa-db-de.com

Ereignis auslösen, wenn Benutzer zu einem bestimmten Element scrollen - mit jQuery

Ich habe eine H1, die weit unten auf einer Seite ist ..

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

und ich möchte eine Warnung auslösen, wenn der Benutzer zum h1 blättert oder es in der Browseransicht hat.

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

wie mache ich das?

63
Karl Coelho

Sie können den offset des Elements berechnen und diesen dann mit dem scroll Wert vergleichen, wie folgt:

$(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!');
   }
});

Überprüfe dies Demo Fiddle


Aktualisiert Demo Fiddle keine Warnung - stattdessen FadeIn () das Element


Der Code wurde aktualisiert, um zu überprüfen, ob sich das Element im Ansichtsfenster befindet oder nicht. Dies funktioniert also unabhängig davon, ob Sie nach oben oder unten scrollen und der if-Anweisung einige Regeln hinzufügen:

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

Demo Fiddle

117
DaniP

Kombinieren Sie diese Frage mit der besten Antwort von jQuery-Auslöseraktion, wenn ein Benutzer an einem bestimmten Teil der Seite vorbeirollt

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
    }
});

[~ # ~] Update [~ # ~]

Ich habe den Code so verbessert, dass er ausgelöst wird, wenn sich das Element in der Mitte des Bildschirms befindet und nicht ganz oben. Der Code wird auch ausgelöst, wenn der Benutzer den unteren Bildschirmrand berührt und die Funktion noch nicht ausgelöst wurde.

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
    }
});
24
Daniel Tonon

Ich denke, Ihre beste Wahl wäre es, eine vorhandene Bibliothek zu nutzen, die genau das tut:

http://imakewebthings.com/jquery-waypoints/

Sie können Ihren Elementen Listener hinzufügen, die ausgelöst werden, wenn Ihr Element oben im Ansichtsfenster angezeigt wird:

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

Für eine erstaunliche Demo davon im Einsatz:

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

7
Mister Epic

Inview Library hat ein Ereignis ausgelöst und funktioniert gut mit jquery 1.8 und höher! 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
  }
});

Lesen Sie dies https://remysharp.com/2009/01/26/element-in-view-event-plugin

5
Dima Melnik

Dies sollte das sein, was Sie brauchen.

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>

Überprüfen Sie dies bootply: http://www.bootply.com/atin_agarwal2/cJBywxX5Qp

2
Atin Agarwal

Sie können jQuery-Plugin mit dem Ereignis inview wie folgt verwenden:

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

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

2
Mehdi

Wenn Sie viele Funktionen basierend auf der Bildlaufposition ausführen, ist Scroll Magic ( http://scrollmagic.io/ ) ausschließlich für diesen Zweck konzipiert.

Es macht es einfach, JS basierend darauf auszulösen, wann der Benutzer beim Scrollen bestimmte Elemente erreicht. Es lässt sich auch in die GSAP-Animations-Engine ( https://greensock.com/ ) integrieren, die sich hervorragend für Parallax-Scrolling-Websites eignet

1
Daniel Tonon

Nur eine kurze Änderung der Antwort von DaniP für alle, die sich mit Elementen befassen, die manchmal über die Grenzen des Ansichtsfensters des Geräts hinausgehen.

Nur eine kleine Bedingung hinzugefügt - Bei Elementen, die größer als das Ansichtsfenster sind, wird das Element angezeigt, sobald seine obere Hälfte das Ansichtsfenster vollständig ausgefüllt hat.

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;
}
1
Allan of Sydney

Sie können dies für alle Geräte verwenden,

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

Feuerrolle nur einmal nach einer erfolgreichen Rolle

Die akzeptierte Antwort hat bei mir funktioniert (90%), aber ich musste sie ein wenig anpassen, um tatsächlich nur einmal zu feuern.

$(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();
            }

        });

Hinweis: Mit erfolgreichem Bildlauf meine ich, wenn der Benutzer zu meinem Element gescrollt hat oder mit anderen Worten, wenn mein Element angezeigt wird.

0
Junaid