side-menu soll in mitscrollen

[elyion_g2]

Hi leute,

Nach mehrfachem suchen in Google und in hier habe ich noch immer nichts gefunden was "meiner vorstellung" nahe kommt.

Ich möchte folgendes erreichen:

http://www.hydremag.ch/prev2/prod.php .. hier soll das sidebar-menu mitscrollen.. und das bis es am unteren rand der sidebar angelangt ist.
denn dort soll es nicht mehr mitscrollen, so das man die seite weiterscrollen kann ohne das dieses sidebar-menu folgt.

ich weiss nicht wieviel genauer ich dass noch beschreiben soll.

bitte kommt nicht mit CSS -> position: fixed; ... das muss javascript sein... fixed ist nämlich für mich nicht die richtige lösung - es soll ja mitscrollen von punkt a bis max. punkt b...


ich danke euch für eure antworten!!

[malf_21]

http://johnpolacek.github.com/scrollorama/

Schau Dir den Effekt «PIN IT» an. Hoffe es hilft weiter.

[elyion_g2]

danke für deine antwort! .. nur dieses script hat ein problem .. es verlangt nach fixen DIV höhen... was ich leider nicht haben kann... mit php verändere ich nämlich immer den inhalt der seite...deshalb ändert sich auch ständig die div höhe der sidebar ...

[elyion_g2]

Ich habs nun hingekriegt mit folgendem script:

<script>
    window.onscroll = function()
    {
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 175 || self.pageYOffset > 175) {
            $('#scrollingdiv').css('position','fixed');
        } else if (document.documentElement.scrollTop < 175 || self.pageYOffset < 175) {
            $('#scrollingdiv').css('position','relative');
        }
    }
}
    </script>

nun müsste er aber aufhören wenn man unten ankommt... damit es nicht über den footer geht... seht selbst:

http://www.hydremag.ch/prev2/prod.php

dafür habe ich einfach noch nie irgendwo eine lösung gefunden :/ ich hoffe ihr habt evtl. eine antwort - wäre euch wirklich dankbar!

[cebito]

Hab dir hier mal ein Beispiel gemacht http://jsfiddle.net/RTnvK/ so sparst dir auch die hardcodierte Höhe. Die else-Zweige sind drin, weil er sonst bei schnellem scrollen vor dem Ziel stehen bleibt. Braucht auch kein position, geht mit margin-top...

Edith sagt noch - wenn schon jQuery, dann auch konsequent

[elyion_g2]

Zitat von cebito

Hab dir hier mal ein Beispiel gemacht http://jsfiddle.net/RTnvK/ so sparst dir auch die hardcodierte Höhe. Die else-Zweige sind drin, weil er sonst bei schnellem scrollen vor dem Ziel stehen bleibt. Braucht auch kein position, geht mit margin-top...

Edith sagt noch - wenn schon jQuery, dann auch konsequent

Vielen dank für deine Hilfe, das läuft schon mal.. nur .. kennste infinity-scroll? .. das ist nicht gerade wünschenswert... ausserdem .. weshalb behält er immer den abstand zu oben? .. der soll eigentlich nach ganz oben und dann erst stehen bleiben....

http://www.hydremag.ch/prev2/prod.php


abgsehen davon.. beim scrollen springt es immer wieder auf und ab (ein wenig) .. das sieht unschön aus... ...

kann man nicht mit den position: etwas machen? ... man müsste irgendwie so wie ich es zu beginn hatte, nur dann ihm sagen, wenn man so und so viel pixel vor dem SEITENENDE (nicht Browser-Fenster-Ende) steht soll er die position: ... wieder ändern... damit es eben nicht mehr "fixed" ist sondern wieder mit dem content mitscrollt... .. ist nur eine frage - wenn es nicht gehen würde oder nur irgendwie gehen würde, aber niemand eine konkrete antwort dazu hat, bitte mit dem vorangehenden lösungsweg weiterfahren ... (dem von cebito)

[cebito]

Zitat von elyion_g2

ausserdem .. weshalb behält er immer den abstand zu oben? .. der soll eigentlich nach ganz oben und dann erst stehen bleiben....

Du musst natürlich alle Elemente, die du hast in die Rechnung mit einbeziehen. Für margin-top also auch deine Überschrift mit abziehen.

Zitat von elyion_g2

kennste infinity-scroll?

Die Bedingung der Abfrage wird nie erfüllt, weshalb er immer weiter nach unten geht. Das Problem ist, du hast oben einige (teilweise sinnfreie) Elemente, die sich teilweise sogar noch mit dem Content überlappen. Du kannst natürlich das, was bei mir $('#header').height() ist auch als hardcodierten Pixelwert einsetzen um JS das zusammenrechnen zu sparen.

[elyion_g2]

Zitat von cebito

Du musst natürlich alle Elemente, die du hast in die Rechnung mit einbeziehen. Für margin-top also auch deine Überschrift mit abziehen.

Nein, die Überschrift gehört auch dazu, die muss ja mitscrollen.. aber er hat im margin-top immer glaub ich 205px drin oder so etwas... sobald ich herunter scrolle müsste diese auf margin-top 0.. damit dieser dann ganz oben am browserrand erst anhält (fixiert wird)....

Zitat von cebito

Das Problem ist, du hast oben einige (teilweise sinnfreie) Elemente, die sich teilweise sogar noch mit dem Content überlappen.

ähm ja ... welche währen das deiner Meinung nach?

Zitat von cebito

Du kannst natürlich das, was bei mir $('#header').height() ist auch als hardcodierten Pixelwert einsetzen um JS das zusammenrechnen zu sparen.

nein leider nicht... denn die höhe des divs ändert ständig...

[cebito]

Zitat von elyion_g2

Nein, die Überschrift gehört auch dazu, die muss ja mitscrollen..

Aber nicht die Überschrift "Verkaufsprodukte"

Zitat von elyion_g2

ähm ja ... welche währen das deiner Meinung nach?

#header bspw. Abstände erzeugt man mit margins und paddings nicht mit leeren Elementen.

Zitat von elyion_g2

nein leider nicht... denn die höhe des divs ändert ständig...

Es geht ja auch nicht um die Höhe vom div, sondern dem was drüber ist. Da fällt mir ein, du kannst statt der Rechnung auch den offset top vom div nehmen, spart die rechnerei. Manchmal hab auch ich Schuppen vor den Augen

[elyion_g2]

Zitat von cebito

Aber nicht die Überschrift "Verkaufsprodukte"

was hat die denn damit zu tun? die liegt weder im selben div noch ist sie linksbündig ...
das ganze sieht ja im urkonstrukt etwa so aus wie dein beispiel ... links einzeln .. sidebar - rechts einzeln content ... links sidebar > überschrift + menupunkte ... rechts content > überschrift und inhalt..

Zitat von cebito

Da fällt mir ein, du kannst statt der Rechnung auch den offset top vom div nehmen, spart die rechnerei. Manchmal hab auch ich Schuppen vor den Augen

tut mir leid, ich bin nicht so eine stute im javascript ^^ .. ich weiss zwar was du damit meinst, aber ich kann es nicht skripten..ich habe dafür zu wenige kenntnisse :/

Zitat von cebito

#header bspw. Abstände erzeugt man mit margins und paddings nicht mit leeren Elementen.

diesen sowie den #footer unten habe ich nur erstellt, weil du diesen in deinem script so dringend benötigst, ich die aber nirgendwo habe... ich würde das ansonsten schon (war zuvor auch so) mit margin / padding lösen

[cebito]

Die Überschrift hat sehr wohl was damit zu tun, weil sie ja die Höhe vom gesamten div mit beeinflusst. Ich hab jetzt hier noch mal ein Beispiel gemacht, das sich am rechten div orientiert, so ist das bissl einfacher http://jsfiddle.net/w8ZbT/
Und nein, ich benötige keinen Header in meinem script, du kannst nur nicht von mir verlangen, das ich mir noch die id's und Klassen aus deiner Seite raussuche und die dann für mein Beispiel verwende. Wie gesagt ist es ein Beispiel und du musst es auf deine Verhältnisse anpassen, was heißt wenn ich einen #header hab, dann simulier ich damit nur den Kopfbereich deiner Seite.

[elyion_g2]

"Und nein, ich benötige keinen Header in meinem script, du kannst nur nicht von mir verlangen, das ich mir noch die id's und Klassen aus deiner Seite raussuche und die dann für mein Beispiel verwende. Wie gesagt ist es ein Beispiel und du musst es auf deine Verhältnisse anpassen, was heißt wenn ich einen #header hab, dann simulier ich damit nur den Kopfbereich deiner Seite."

Das weiss ich auch, ich habe nur eben diesen kopfbereich nicht als ein div dort stehen.. aber das ist mein problem...

ich versuche jetzt dein beispiel mal umzusetzen...

[elyion_g2]

habe es nun umgeschrieben und es läuft nun perfekt - danke dir!!!!