Sidr
PSD-Tutorials.de

side-menu soll in mitscrollen

Dieses Thema im Forum "PHP und andere Scriptsprachen" wurde erstellt von elyion_g2, 13.03.2012.

  1. elyion_g2

    elyion_g2 Ach Jungs!?!

    Dabei seit:
    11.10.2009
    Beiträge:
    210
    Geschlecht:
    weiblich
    Ort:
    Schweiz
    Software:
    Adobe CS6, Production Premium Suite
    Kameratyp:
    Canon EOS 550D & Canon EOS 1100D
    side-menu soll in mitscrollen
    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!!
     
    #1      
  2. malf_21

    malf_21 Ganz neu hier

    Dabei seit:
    15.12.2008
    Beiträge:
    9
    Geschlecht:
    männlich
    side-menu soll in mitscrollen
    #2      
  3. elyion_g2

    elyion_g2 Ach Jungs!?!

    Dabei seit:
    11.10.2009
    Beiträge:
    210
    Geschlecht:
    weiblich
    Ort:
    Schweiz
    Software:
    Adobe CS6, Production Premium Suite
    Kameratyp:
    Canon EOS 550D & Canon EOS 1100D
    side-menu soll in mitscrollen
    AW: side-menu soll in mitscrollen

    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 ...
     
    #3      
  4. elyion_g2

    elyion_g2 Ach Jungs!?!

    Dabei seit:
    11.10.2009
    Beiträge:
    210
    Geschlecht:
    weiblich
    Ort:
    Schweiz
    Software:
    Adobe CS6, Production Premium Suite
    Kameratyp:
    Canon EOS 550D & Canon EOS 1100D
    side-menu soll in mitscrollen
    AW: side-menu soll in mitscrollen

    Ich habs nun hingekriegt mit folgendem script:
    Code (Text):
    1. <script>
    2.     window.onscroll = function()
    3.     {
    4.     if( window.XMLHttpRequest ) {
    5.         if (document.documentElement.scrollTop > 175 || self.pageYOffset > 175) {
    6.             $('#scrollingdiv').css('position','fixed');
    7.         } else if (document.documentElement.scrollTop < 175 || self.pageYOffset < 175) {
    8.             $('#scrollingdiv').css('position','relative');
    9.         }
    10.     }
    11. }
    12.     </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! :)
     
    #4      
  5. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.217
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    side-menu soll in mitscrollen
    AW: side-menu soll in mitscrollen

    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 ;)
     
    Zuletzt bearbeitet: 14.03.2012
    #5      
  6. elyion_g2

    elyion_g2 Ach Jungs!?!

    Dabei seit:
    11.10.2009
    Beiträge:
    210
    Geschlecht:
    weiblich
    Ort:
    Schweiz
    Software:
    Adobe CS6, Production Premium Suite
    Kameratyp:
    Canon EOS 550D & Canon EOS 1100D
    side-menu soll in mitscrollen
    AW: side-menu soll in mitscrollen

    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)
     
    Zuletzt bearbeitet: 14.03.2012
    #6      
  7. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.217
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    side-menu soll in mitscrollen
    AW: side-menu soll in mitscrollen

    Du musst natürlich alle Elemente, die du hast in die Rechnung mit einbeziehen. Für margin-top also auch deine Überschrift mit abziehen.
    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.
     
    #7      
  8. elyion_g2

    elyion_g2 Ach Jungs!?!

    Dabei seit:
    11.10.2009
    Beiträge:
    210
    Geschlecht:
    weiblich
    Ort:
    Schweiz
    Software:
    Adobe CS6, Production Premium Suite
    Kameratyp:
    Canon EOS 550D & Canon EOS 1100D
    side-menu soll in mitscrollen
    AW: side-menu soll in mitscrollen

    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)....


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


    nein leider nicht... denn die höhe des divs ändert ständig...
     
    #8      
  9. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.217
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    side-menu soll in mitscrollen
    AW: side-menu soll in mitscrollen

    Aber nicht die Überschrift "Verkaufsprodukte"
    #header bspw. Abstände erzeugt man mit margins und paddings nicht mit leeren Elementen.
    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 :uhm:
     
    #9      
  10. elyion_g2

    elyion_g2 Ach Jungs!?!

    Dabei seit:
    11.10.2009
    Beiträge:
    210
    Geschlecht:
    weiblich
    Ort:
    Schweiz
    Software:
    Adobe CS6, Production Premium Suite
    Kameratyp:
    Canon EOS 550D & Canon EOS 1100D
    side-menu soll in mitscrollen
    AW: side-menu soll in mitscrollen

    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..

    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 :/ :)

    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 ;)
     
    #10      
  11. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.217
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    side-menu soll in mitscrollen
    AW: side-menu soll in mitscrollen

    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.
     
    #11      
  12. elyion_g2

    elyion_g2 Ach Jungs!?!

    Dabei seit:
    11.10.2009
    Beiträge:
    210
    Geschlecht:
    weiblich
    Ort:
    Schweiz
    Software:
    Adobe CS6, Production Premium Suite
    Kameratyp:
    Canon EOS 550D & Canon EOS 1100D
    side-menu soll in mitscrollen
    AW: side-menu soll in mitscrollen

    "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...
     
    #12      
  13. elyion_g2

    elyion_g2 Ach Jungs!?!

    Dabei seit:
    11.10.2009
    Beiträge:
    210
    Geschlecht:
    weiblich
    Ort:
    Schweiz
    Software:
    Adobe CS6, Production Premium Suite
    Kameratyp:
    Canon EOS 550D & Canon EOS 1100D
    side-menu soll in mitscrollen
    AW: side-menu soll in mitscrollen

    habe es nun umgeschrieben und es läuft nun perfekt - danke dir!!!!
     
    #13      
Drupal Programmierung