Wie kann man div anzeigen, wenn der Benutzer den unteren Rand der Seite erreicht?

Wenn der Benutzer zum Ende der Seite scrollt, möchte ich ein div anzeigen, natürlich mit jQuery. Und wenn der Benutzer zurück zum Anfang scrollt, wird div ausgeblendet. So wie Ansichtsfenster zu berechnen (oder was auch immer ist der richtige Name) :)Wie kann man div anzeigen, wenn der Benutzer den unteren Rand der Seite erreicht?

Dank

Quelle

2010-05-04 Kenan

sprichst du von einem div, der eine position haben wird: fixed; oder ein Div, das nur am Ende des Inhalts ist? – codedude

wird es feste Position am Ende der Seite, vielleicht "unten: 50px" – Kenan

muss Ihnen den Einstieg:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2768264</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $(window).scroll(function() { 
        if ($('body').height() <= ($(window).height() + $(window).scrollTop())) { 
         alert('Bottom reached!'); 
        } 
       }); 
      });  
     </script> 
     <style> 
      body { margin: 0; } 
     </style> 
    </head> 
    <body> 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    </body> 
</html>

Dies setzt voraus, dass body eine margin von 0 hat. Andernfalls müssen Sie den oberen und unteren Rand zum $('body').height() hinzufügen.

Quelle

2010-05-04 20:10:33 BalusC

Danke, aber das funktioniert nicht :( – Kenan

Haben Sie die Ränder überprüft? Ich aktualisierte die Antwort mit einem SSCCE. – BalusC

Ja, Rand ist 0, Ich benutze CSS reset. Und auch ich benutze jQuery 1.3.2? – Kenan

$ (Dokument). scrollTop() sollte Ihnen die Position der Bildlaufleiste geben. überprüfen Sie das gegen Dokumentenhöhe. dann fade das div ein oder aus. Diese

Quelle

2010-05-04 19:52:16

Hier ist ein kleiner bearbeiten auf den Code des BalusC, wenn Sie ein div kein Javascript Popup angezeigt werden soll:

<head> 
    <title>SO question 2768264</title> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $(window).scroll(function() { 
       if ($("body").height() <= ($(window).height() + $(window).scrollTop())) { 
        $("#hi").css("display","block"); 
       }else { 
        $("#hi").css("display","none"); 
       } 
      }); 
     }); 
    </script> 
    <style> 
     body { margin: 0; } 
     #hi { 
      background: red; color: #FFF; position: fixed; bottom: 0px; right: 0px; display: none; 
     } 


    </style> 
</head> 
<body> 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 

    <div id="hi">HIIIIIIIIIIII</div> 
</body>

Quelle

2012-03-20 03:18:21

Hallo. Angenommen, anstelle von "body" verwende ich eine div-ID und was, wenn das "hi" beispielsweise angezeigt werden soll, wenn ich 80% des gescrollten divs betreue? :) Meldet euch eine gute Antwort :) –

Sie können die folgenden verwenden:

$(window).scroll(function() { 
    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) { 
     //Bottom Reached 
    } 
});

ich das, weil ich habe

body { 
    height:100%; 
}

hoffe, das hilft

Quelle

2013-03-21 20:17:05

Danke, ich war genau im selben Fall. Deine Lösung hat für mich funktioniert! – Adrien

@Adrien Gern geschehen, mein Freund. Froh, dass ich helfen konnte :) –

Wie kann man div anzeigen, wenn der Benutzer den unteren Rand der Seite erreicht?

Antwort

Verwandte Themen