Machen div anzeigen, wenn ein bestimmter Punkt auf der Seite übergeben wird

Nicht sicher, wo Sie anfangen mit diesem wirklich. Kennt jemand eine Möglichkeit eine div ändern von display:none " (oder etwas ähnliches), sobald ein bestimmter div-Element auf der Seite gescrollt?

javascript/jquery
Ich weiß, dass, aber ich bin auf der Suche nach Ratschläge, wie Sie ein Skript schreiben, dass die das tun würden.
Was haben Sie versucht? Was macht Ihr html/css Aussehen? Wir sind hier um zu helfen, nicht alles für Sie tun.
archive.plugins.jquery.com/project/isOnScreen
^ ist nicht länger eine aktive link

InformationsquelleAutor Francesca | 2012-08-14

  1. 30

    Zuerst gebt Ihr div eine ID -- zum Beispiel dvid, und angenommen, die anderen div (die Sie wollen, um zu erkennen, scrollen nach) hat eine ID othdiv.
    Dann können Sie etwas wie das hier tun:

    $(document).ready( function() {
    $("#dvid").hide(); //hide your div initially
    var topOfOthDiv = $("#othdiv").offset().top;
    $(window).scroll(function() {
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $("#dvid").show(); //reached the desired point -- show div
        }
    });
});

    Winzig kleine jsFiddle demo: winzige link.

    Dies ist nur ein Entwurf; nicht vorgesehen, um eine ready-to-copy-paste-code 🙂

    InformationsquelleAutor Chris

  2. 5

    In der Fenster onscroll, Holen Sie sich die aktuelle scroll-position sowie die div-position vom oberen Rand der Seite und zeigen Sie/verbergen Sie Ihr element entsprechend.

    window.onscroll = function (oEvent) {
  var mydivpos = document.getElementById("mydiv").offsetTop;
  var scrollPos = document.getElementsByTagName("body")[0].scrollTop;

  if(scrollPos >= mydivpos)
    document.getElementById("noshow").className = "";
  else
    document.getElementById("noshow").className = "hidden";
};

    Demo

    InformationsquelleAutor sachleen

  3. 2

    SCROLLBARS & "$(window).scrollTop()"

    Was ich entdeckt habe ist, dass das aufrufen von Funktionen wie in der Lösung, zum Glück, die oben bereitgestellt wird, (es gibt viele weitere Beispiele in diesem forum, die alle gut funktionieren) ist nur erfolgreich, wenn Bildlaufleisten sichtbar sind-und Betriebskosten.

    Wenn wie ich (vielleicht dummerweise versucht), Sie wollen die Umsetzung einer solchen Funktionalität, und Sie möchten auch, sagen wir, implementieren Sie einen minimalistischen "sauberen Bildschirm" frei von Scrollbalken, wie bei diese Diskussion, dann $(window).scrollTop() wird nicht funktionieren.

    Kann es eine Programmierung grundlegende, aber dachte, ich würde anbieten das heads-up, um alle Kolleginnen und Neulinge, wie ich verbrachte eine lange Zeit, herauszufinden dieses heraus.

    Wenn jemand könnte einige Ratschläge, wie dies zu überwinden oder ein wenig mehr Einblick, fühlen Sie sich frei zu Antworten, wie ich Sie hatte, zu resort to show/hide onmouseover/mouseleave statt hier

    Lange Leben und Programm, CollyG.

    Super!!! Danke, danke, danke!!!!!

    InformationsquelleAutor collyg

  4. 0

    Hier ist eine funktionierende fiddle

    Den jquery

    $(function(){
    var d = $('.hidden');
    var dPosTop = d.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= dPosTop){
          d.show(2000);
        }
      else{
        d.hide(2000);
      }
    });

});

    InformationsquelleAutor Clyde Lobo

  5. 0

    Änderung von @Abody97 Antwort, um zu zeigen, einmal ein div-Element wurde gescrollt

    http://jsfiddle.net/nickaknudson/f72vg/

    $(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        //once top of div is scrolled past
        if($(body).scrollTop() >= $("#div_to_scroll_past").offset().top) {
            $("#div_to_show").show(); //reached the desired point -- show div
        }
    });
});

    ODER sobald das Ende der div-Element gescrollt

    $(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        //once bottom of div is scrolled past
        if($(body).scrollTop() >= ( $("#div_to_scroll_past").offset().top + $("#div_to_scroll_past").outerHeight() )) {
            $("#div_to_show").show(); //reached the desired point -- show div
        }
    });
});

    RESSOURCEN

    Eigentlich, möchten Sie vielleicht überprüfen Sie erneut Ihre Verwendung .scrollTop() mit der div selbst. Das gibt nur die Position der Bildlaufleiste, die die div hat, wenn überhaupt. Tut mir Leid-wusste nicht, Lesen Sie Ihren code sorgfältig, das erste mal 🙂 ich denke, Sie wollen .offset().top.
    Du hast absolut Recht. Lesen scrollTop Dokumentation zu schnell! Danke! Bearbeitet zu erfüllen 🙂 jsfiddle.net/nickaknudson/f72vg

    InformationsquelleAutor nickaknudson

  6. -1

    Der einfachste Weg, dies zu tun wäre, um jQuery mit einer Funktion wie diese.

    var eventPosition = 550; //This is the height position you want the event to fire on.
$(window).scroll(function(e) {
    if (window.screenY >= eventPosition) {
        fireEvent();
    }
});

function fireEvent() {
    //Add logic here to complete what you're trying to do.
};

    InformationsquelleAutor BenR

Schreibe einen Kommentar