Anzeige

position fixed android < 4

position fixed android < 4 | PSD-Tutorials.de

Erstellt von KasselJulian, 06.08.2013.

  1. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    position fixed android < 4
    Hi,

    bei manchen mobilen Browser wird position:fixed; ja so dargestellt, dass das jeweilige Element mit dieser Eigenschaft nachkommt, nachdem man gescrollt hat. Sprich im Zeitraum des Scrollens verschwindet das Element.
    Gibt es dafür ein Plugin von jQuery was dieses behebt?

    Gruß
     
    #1      
  2. gingin

    gingin Noch nicht viel geschrieben

    Dabei seit:
    19.04.2008
    Beiträge:
    5
    Geschlecht:
    weiblich
    position fixed android < 4
    AW: position fixed android < 4

    Vielleicht suchst Du sowas ?!
    JAVASCRIPT mit jquery

    //Check to see if the window is top if not then display button class="scrollToTop"
    $(window).scroll(function(){
    if ($(this).scrollTop() > 1000) {
    $('.scrollToTop').fadeIn();
    } else {
    $('.scrollToTop').fadeOut();
    }
    });
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},1500);
    return false;
    });

    CSS
    .scrollToTop {
    background-color:red;
    bottom: 30px;
    color: white;
    display:none;
    text-decoration: none;
    height: 30px;
    padding: 10px;
    position: fixed;
    right: 30px;
    text-align: center;
    text-decoration: none;
    width: 30px;
    z-index: 2;
    line-height: 1em;
    }
     
    Zuletzt bearbeitet: 06.08.2013
    #2      
  3. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    position fixed android < 4
    AW: position fixed android < 4

    Hallo,
    wenn ich das richtig verstehe blendet das Script das Element mit einem fade-Effekt aus wenn man scrollt und wieder mit einem fade-Effekt ein wenn man aufhört zu scrollen.
    Ist zwar ganz schön, aber in mehrfacher Hinsicht nicht brauchbar:
    -nicht bei allen mobilen Geräten äußert sich position:fixed; wie ich es beschrieben habe. Deshalb würde dein Code bei allen Geräten, auch bei denen die unterstützt werden, das Element ausblenden und wieder einblenden.
    -Es löst das Problem nicht, sondern ist nur eine "Verziehrung". Ich möchte ja erreichen, dass das Element immer beim Scroll standhaft oben bleibt und überhaupt nicht erst beim Scrollen verschwindet
     
    #3      
  4. gingin

    gingin Noch nicht viel geschrieben

    Dabei seit:
    19.04.2008
    Beiträge:
    5
    Geschlecht:
    weiblich
    position fixed android < 4
    AW: position fixed android < 4

    Hi,

    wenn man beim scrollen über 1000 ist von top aus beim nach unten scrollen, blendet sich der button mit fade ein .... wenn man dann unten an der seite angekomen ist kann man mit klick drauf einfach komplett nach oben durch transportiert :) ohne aktives scrollen

    Du willst dass dein button ständig da ist?
    CSS
    .button{
    //häng ihn doch 'unten' mit 30px Abstand an und 30px Abstand rechter Rand
    bottom: 30px;
    right: 30px;
    color: white;
    background-color:red;
    height: 30px;
    padding: 10px;
    position: fixed;
    text-align: center;
    text-decoration: none;
    width: 30px;
    z-index: 2;
    line-height: 1em;
    }

    <a href="#" class="button" style="display: inline;">^</a>
    denke, so müsste es gehen. Bei mir verschwindet da nix.
    lg Gina
     
    Zuletzt bearbeitet: 06.08.2013
    #4      
  5. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    position fixed android < 4
    AW: position fixed android < 4

    Hi Gina,

    ich glaube du hast mein Problem falsch interpretiert. Es geht hier nicht um die Funktionen eines Browsers vom Laptop, Tablet oder PC sondern von mobilen Endgeärten mit Android version < 4. Wenn du mal ein Element mit der CSS-Eigenschaft position:fixed; in eine HTML packst, dazu ein bisschen Beispieltest sodass du auf der Seite scrollen kannst erkennst du mein Problem. Das Element verschwindet kurzzeitig beim Scrollen und wenn du damit aufhörst kommt es wieder. Das liegt am Browser des mobilen Endgeräts und nicht an einem CSS-Code (position:fixed; ist ja technisch vorhanden).
    Dein Code ist ein ScrollToTop-Button, der nichts mit meinem zutun hat.
     
    #5      
  6. gingin

    gingin Noch nicht viel geschrieben

    Dabei seit:
    19.04.2008
    Beiträge:
    5
    Geschlecht:
    weiblich
    position fixed android < 4
    AW: position fixed android < 4

    Ja, Du hast recht, ich habe Dein Problem falsch verstanden. Ich habe kein Android < 4 ich kenne das garnicht... ( puhh das gibts also auch noch !!! habe 4.1.2 und wusste nix bisher von solchen Problemen - keine gute Nachricht)
    Dann versuch doch folgendes:
    per css den button auf display: none
    dann konstant mittels javascript einblenden, falls das css vom browser <4 nicht korrekt interpretiert werden sollte. (... ich spekuliere)

    $(document).ready(function(){
    $('.button').show();
    });
     
    Zuletzt bearbeitet: 06.08.2013
    #6      
  7. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    position fixed android < 4
    Sorry aber das ist absolut zum falschen Thema :D
    Nimm es mir nicht übel aber lass es bitte gut sein. Ich glaube du verstehst es einfach nicht.
    Bradfrostweb.com/blog/mobile/fixed-position/
     
    #7      
  8. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    position fixed android < 4
    AW: position fixed android < 4

    Der Link beschreibt die Möglichkeiten und Problemlösungen(ansätze) ja sehr gut. Heißt das, dass du damit zu einer Lösung gekommen bist?
     
    #8      
  9. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    position fixed android < 4
    AW: position fixed android < 4

    Nein, ich habe ja recherchiert bevor ich gepostet habe und das natürlich davor gefunden. Er beschreibt zwar ein paar Librarys doch keine explizite Lösung NUR dafür. In den Librarys geht es um viel mehr und ich will keine Codezeilen einbinden, die ich nicht brauchen werde. Deshalb ein jQuery-Script was eben NUR das löst.
     
    #9      
  10. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    position fixed android < 4
    AW: position fixed android < 4

    Ich wage zu behaupten dass du eine Library, welche genau deine Bedürfnisse erfüllt, nicht finden wirst. Außerdem bindest du ja auch jQuery ein und ich denke, du verwendest auch nicht 100% davon, bindest also auch viel unnötige Codezeilen ein. Das mag jetzt etwas frech klingen, aber was hindert dich daran, selbst ein Plugin zu schreiben, was deinen Anforderungen gerecht wird?
     
    #10      
  11. KasselJulian

    KasselJulian Dude

    Dabei seit:
    30.08.2010
    Beiträge:
    628
    Geschlecht:
    männlich
    position fixed android < 4
    AW: position fixed android < 4

    Würde ich machen, aber ich weiß nicht wie. Wenn du mir näher erläuterst wie ich das Browser-Verhalten von position:fixed; so beeinflussen kann, dass ich mein Problem löse, kann ich es mir ggf. selber schreiben.


    // EDIT: Hier zum ausprobieren. Gucke mal wie sich das Element verhält.
    Code (Text):
    1.  
    2. <!doctype html>
    3. <html>
    4. <head>
    5. <meta charset="utf-8">
    6. <title>Unbenanntes Dokument</title>
    7. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
    8. <style type="text/css">
    9. body, html{
    10.     with:100%;    
    11. }
    12.     .header{
    13.         height:50px;
    14.         width:100%;
    15.         background:yellow;
    16.         position:fixed;
    17.         top:0;
    18.         left:0;    
    19.     }
    20. </style>
    21. </head>
    22. <body>
    23. <div class="header"></div>
    24. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
    25.  
    26. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  
    27.  
    28. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  
    29.  
    30. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  
    31.  
    32. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.  
    33.  
    34. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.  
    35.  
    36. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.  
    37.  
    38. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
    39.  
    40. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  
    41.  
    42. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  
    43.  
    44. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
    45.  
    46.  
    47. </body>
    48. </html>
    49.  
    50.  
     
    Zuletzt bearbeitet: 07.08.2013
    #11      
x
×
×