Fensterscrollposition durch jQuery ermitteln

[weedo]

Hallo,

ich hab mal wieder eine kleine Frage, da ich nach stundenlanger Suche immer noch keine Lösung eingefallen ist und mir stets in diesem Forum geholfen wurde.

Danke nochmal an dieser Stelle.

Es geht heute dadrum, dass ich einen Container habe, der Scrollbar ist. Dort soll ermittelt werden, wo er sich beim Scollen befindet.

Ein gutes Beispiel hierfür ist die Chronik bei Facebook.

Wenn ich auf der Seite Scrolle wird mir dort angezeigt, in welchem Jahr ich mich befinde. Ich möchte etwas ähnliches realisieren, nur fehlt mir einfach der Ansatz dazu.

Hier meine Grundform:

html:

<main>
  <header>
    <h1>headline</h1>
    <h2>subline</h2>
    <span>_________</span>
  </header>
  <article>
      <p>Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
          Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext Texttexttext
      </p>
  </article>
</main>
<aside>
    <span id="toplink">/|\</span><br>
    <span id="textaera"></span><br>
    <span id="bottomlink">\|/</span>
</aside>
<footer>&copy;</footer>

Css:

main {
    border: 1px solid #f11;
    width: 400px;
    height: 500px;
    padding: 25px;
    overflow: hidden;
}
article {
    border: 1px solid #ff1;
    width: 450px;
    height: 350px;
    overflow: auto;
}
p {
    border: 1px solid #f1f;
    width: 400px;
}
aside {
    float: right;
    padding: 3em;
    font-size: 24px;
}
footer {
    clear: both;
}
#toplink {
    display: none;
}

Mein Gedanke war es mit der jquery-Methode .scroll() ein Scrollevent abzufragen und mittels .scrollTop() die Position des Paragraphen zu ermitteln.

Javascript

$(document).ready(function(){
    $("p").scroll(function() {
        console.log($("p").scrollTop());
    });
});

leider bekomme ich keinen Return in die Console. Kennt jemand ein Script, wo ich mir den Aufbau solch einer Funktion aufbauen kann oder hat einen Tipp, wie ich das gelöst bekomme?

Für Antwort wäre ich sehr Dankbar.

lg weedo

 

[Sempervivum]

Habe deinen Code mal getestet und bei mir ist da überhaupt nichts scrollbar. Oder ist dein Problem, überhaupt einen scrollbaren Container zu bauen? So etwas findest Du z. B. hier:
http://jscrollpane.kelvinluck.com/
BTW: Ein span-Tag hat im Head nichts zu suchen.

 

[weedo]

BTW: Ein span-Tag hat im Head nichts zu suchen.

<head> != <header>


http://www.w3schools.com/html/html5_semantic_elements.asp

Scrollbar ist der Container mit dem ganzen text. im Beispiel magenta eingefärbt.

 

[SpiceLab]

In dem Modell wird überhaupt nicht in <p>, sondern in <article> gescrollt

http://jsfiddle.net/spicelab/vpjoqq3L/

Für dein gezeigtes jQuery-Script bedeutet das:

$(document).ready(function(){
  $("article").scroll(function() {
    console.log($("article").scrollTop());
  });
});

P.S.

Habe deinen Code mal getestet und bei mir ist da überhaupt nichts scrollbar.

@Sempervivum: Die zu gering gewählte Breite für <main> verdeckt den Scrollbalken von <article>