Auteur Topic: Div fixed position tot einde container  (gelezen 2842 keer)

0 leden en 1 gast bekijken dit topic.

xvilo

  • Global Moderator
  • Verslaafd DigitalPlace Lid
  • *****
  • Berichten: 2675
  • Karma: -44
    • Bekijk profiel
    • http://www.xvilo.com
Div fixed position tot einde container
« Gepost op: juni 13, 2016, 10:29:24 am »
  • [+1]0
  • [-1]0
  • Hi,

    Ik zou graag willen hebben dat als je scrolled een bepaalde div fixed word als hij tegen de bovenkant van de viewport aankomt, maar op zijn plaats blijft aan de onderkant van de parent container...
    Voorbeeld is: http://www.apple.com/nl/shop/buy-iphone/iphone6s/5,5-inch-display-64gb-spacegrijs
    Als je dan het koop menu even helemaal door loopt en vervolgens scrolled zie je dat de product thumbnail in beeld blijft tot de gedetailleerde informatie begint.

    Is dit op een makkelijke manier op te lossen?


    Faperdaper

    • Administrator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2274
    • Karma: 29
      • Bekijk profiel
    Re: Div fixed position tot einde container
    « Reactie #1 Gepost op: juli 03, 2016, 02:38:51 pm »
  • [+1]0
  • [-1]0
  • Ik begrijp niet helemaal wat je precies bedoeld. Ik zie de menubalk aan de bovenkant meescrollen wanneer hij buiten beeld dreigt te raken.
    Als dat is wat je wilt zou je met jQuery een scrollHandler kunnen toevoegen welke wordt aangeroepen op het moment dat dat pagina gescrolled wordt en daarin controleren of je scrollTop groter is dan de positie van de div in kwestie. Hieronder een klein voorbeeld:

    Code: javascript [Selecteer]

    jQuery(function() {
        jQuery(window).scroll(onScroll);
    });

    function onScroll() {
        if $(document).scrollTop() > $("#myDiv").position().top {
            $("#myDiv").css("position", "fixed");
        }
        else {
            $("#myDiv").css("position", "static");
        }
    }
    Klik hier voor stats over ons irc kanaal #DPF! Wil je ook ons kanaal joinen? Check deze tutorial. Of gebruik de webchat :)

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2675
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    Re: Div fixed position tot einde container
    « Reactie #2 Gepost op: juli 03, 2016, 03:30:51 pm »
  • [+1]0
  • [-1]0
  • Ik zie dat ze dat hebben aangepast, of we zijn ten prooi gevallen aan A/B testing...
    Deze pagina heeft het wel: http://www.apple.com/nl/shop/buy-iphone/iphone-se

    Je ziet namelijk als eerste de product afbeeldingen aan de linkerkant en aan de rechterkant de uitvoering en opslag capaciteit.
    Als je dan scrolled dan blijft de product thumbnail in beeld tot dat je aan de product informatie komt.

    Naast elkaar:
    http://puu.sh/pOM06/56ff941ea4.jpg

    Als je dan naar onder gescrollt bent:
    http://puu.sh/pOM1A/12ddb5d03b.jpg
    (hier is de linker kolom nog in beeld, maar zal dan wel mee scrollen naar boven)