bubble: fixe Menüleiste, beim Scrollen, Leiste "anheften"

SELF-Forum

fixe Menüleiste, beim Scrollen, Leiste "anheften"

bubble
– Informationen zu den Bewertungsregeln

Hey,

ich bin ja immer wieder erstaunt was mit CSS3 alles möglich ist, nun will ich fragen ob folgendes auch über reines CSS möglich ist:

Angenommen man hat auf der Seite einen Header,darunter die Menüleiste und darunter dann der Seiteninhalt à la

  
<body>  
	<div id="header">...</div>  
	<nav>...</nav>  
	<div id="content">...</div>  
</div>

mit dem CSS, dass die Navigation fixed ist. Wenn man nun auf der Seite scrollt, bleibt ja immer "Luft" zwischen Menüleiste und oberen rand des Viewports.
Wenn man aber nach unten scrollt, sollte sich diese bis nach oben an den Rand bewegen, wenn man wieder nach oben scrollt, soll sie dann wieder zurück.

Hier mal ein wenig Pseudo-CSS:

  
#header { height: 50px };  
nav {  
	position: fixed;  
	top: max(calc(50 - getScrollY()),0);  
}

Momentan benutze ich dafür JavaScript, da dieses aber wiederum von nicht zu wenigen verpöhnt wird, suche ich nach einem CSS weg.

MfG
bubble

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. fixe Menüleiste, beim Scrollen, Leiste "anheften"

    Gunther
    – Informationen zu den Bewertungsregeln

    Hey!

    Momentan benutze ich dafür JavaScript, da dieses aber wiederum von nicht zu wenigen verpöhnt wird, suche ich nach einem CSS weg.

    Den wirst du wohl nicht finden ...!
    Es gibt zumindest aktuell keine Möglichkeit per CSS die Position eines Elements zu ermitteln und in Abhängigkeit davon die Eigenschaften entsprechend zu ändern.

    Dafür ist und bleibt Javascript das Mittel der Wahl.
    Und wer das "verpönt" hat IMHO keine Ahnung. Verpönt ist lediglich, nicht jeweils das geeignetste Mittel einzusetzen.

    Gruß Gunther

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. fixe Menüleiste, beim Scrollen, Leiste "anheften"

      bubble
      – Informationen zu den Bewertungsregeln

      Und wer das "verpönt" hat IMHO keine Ahnung. Verpönt ist lediglich, nicht jeweils das geeignetste Mittel einzusetzen.

      Da bin ich der gleichen Ansicht, aber letzten Endes scheinen es ja doch ein paar mehr Leute zu sein, von dem was ich in letzter Zeit in diversen Foren gelesen hatte.

      Schade eigentlich, das es (noch) nicht gibt :(

      MfG
      bubble

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. fixe Menüleiste, beim Scrollen, Leiste "anheften"

      Der Martin
      – Informationen zu den Bewertungsregeln

      Hallo,

      Dafür ist und bleibt Javascript das Mittel der Wahl.
      Und wer das "verpönt" hat IMHO keine Ahnung. Verpönt ist lediglich, nicht jeweils das geeignetste Mittel einzusetzen.

      das sehe ich auch so - und deshalb ist es für mich auch "verpönt", wenn Javascript für Dinge eingesetzt wird, die man ebenso einfach (oder sogar einfacher) und ohne Komforteinbußen auch ohne Javascript machen könnte. Zum Beispiel ein Formular abschicken, oder ein großes Bild beim Klicken auf ein Thumbnail anzeigen.
      Okay, letzteres kann man mit JS "schöner" machen, aber die Basislösung (ein gewöhnlicher Link) sollte als Fallback nicht fehlen.

      Ciao,
       Martin

      --
      Lieber mit Betty im Wald
      als mit Waldi im Bett.
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. fixe Menüleiste, beim Scrollen, Leiste "anheften"

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Momentan benutze ich dafür JavaScript, da dieses aber wiederum von nicht zu wenigen verpöhnt wird, suche ich nach einem CSS weg.

    Wenn ich mich richtig erinnere, hat Chrome hat in einer der letzten Versionen einen experimentellen position-Wert eingeführt, mit dem man absolute zu fixed „wechseln“ kann, wenn eine bestimmte Scrollposition im Dokument erreicht ist.

    So lange sowas aber nicht browserübergreifend implementiert ist, wirst du dich wohl mit JavaScript-basierten Möglichkeiten beschäftigen müssen, bspw. http://demosthenes.info/blog/130/Scroll-To-Top-Then-Fixed-Effect-With-JQuery

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. fixe Menüleiste, beim Scrollen, Leiste "anheften"

      Matti Mäkitalo Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      Momentan benutze ich dafür JavaScript, da dieses aber wiederum von nicht zu wenigen verpöhnt wird, suche ich nach einem CSS weg.

      Wenn ich mich richtig erinnere, hat Chrome hat in einer der letzten Versionen einen experimentellen position-Wert eingeführt, mit dem man absolute zu fixed „wechseln“ kann, wenn eine bestimmte Scrollposition im Dokument erreicht ist.

      Meinst du position: sticky?

      Bis die Tage,
      Matti

      --
      Webapplikationen in C++ entwickeln
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. fixe Menüleiste, beim Scrollen, Leiste "anheften"

        bubble
        – Informationen zu den Bewertungsregeln

        Meinst du position: sticky?

        Yep, genau das meine ich :) Aber weils anscheinend kaum ein Browser unterstützt werd ichs wohl mit JavaScript machen. (Werd aber trotzdem ein Auge drauf haben)

        MfG
        bubble

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. fixe Menüleiste, beim Scrollen, Leiste "anheften"

      bubble
      – Informationen zu den Bewertungsregeln

      So lange sowas aber nicht browserübergreifend implementiert ist, wirst du dich wohl mit JavaScript-basierten Möglichkeiten beschäftigen müssen, bspw. http://demosthenes.info/blog/130/Scroll-To-Top-Then-Fixed-Effect-With-JQuery

      Das wird bei mir leider nicht funktionieren, da für den Fall das man horizontal scrollen muss, dann das Menü halt teilweise nicht mehr sichtbar ist.

      Unterbenutzung von jQuery hab ich folgendes zusammengewerkelt und will an dieser Stelle mal wegen Verbesserungsvorschlägen fragen:

      $(function(){  
	window.Menu = {  
		object: document.getElementById("menu"),  
		orgTop: 0,  
		atmTop: 0  
	};  
	Menu.orgTop = Menu.atmTop = $(Menu.object).offset().top;  
	$(window).scroll(function(){  
		newTop = Math.max($(this).scrollTop(),Menu.orgTop);  
		if(newTop!=Menu.atmTop){  
			$(Menu.object).css({top:newTop});  
			Menu.atmTop = newTop;  
		}  
	});  
});
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    3. fixe Menüleiste, beim Scrollen, Leiste "anheften"

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@ChrisB:

      nuqneH

      mit dem man absolute zu fixed „wechseln“ kann

      relative zu fixed.

      So lange sowas aber nicht browserübergreifend implementiert ist

      Wie gasagt sehe ich nicht einmal, dass es in Chrome implementiert wäre.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. fixe Menüleiste, beim Scrollen, Leiste "anheften"

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@bubble:

    nuqneH

    <body>

    <div id="header">...</div>
    <nav>...</nav>
    <div id="content">...</div>
    </div>

      
Warum nicht so?  
  
~~~css
<body>  
        <header>...</header>  
        <nav>...</nav>  
        <main role="main">...</main>  
</body>

    Momentan benutze ich dafür JavaScript

    Das wird wohl auch noch eine Weile so bleiben.

    „Support right now is Chrome 23.0.1247.0+ (current Canary) and WebKit nightly“? Hätte ich nicht auf den 24er upgraden sollen? Haben die das wieder ausgebaut?

    suche ich nach einem CSS weg.

    Ob der Rechtschreibung bin ich auch ganz hin und weg.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. fixe Menüleiste, beim Scrollen, Leiste "anheften"

      bubble
      – Informationen zu den Bewertungsregeln

      Warum nicht so?

      <body>

      <header>...</header>
              <nav>...</nav>
              <main role="main">...</main>
      </body>

      Bezüglich HTML5 fehlt mir noch sehr viel Wissen, dass ändert sich jetzt aber nach und nach, je nach dem wie es meine Freizeit zu lässt  
  

> > Momentan benutze ich dafür JavaScript  
>   
> Das wird wohl auch noch eine Weile so bleiben.  

Leider =|  
  

> > suche ich nach einem CSS weg.  
>   
> Ob der Rechtschreibung bin ich auch ganz hin und weg.  

Nun denn, ich werd dann mal im beschämt im Boden versinken :'D  
  

> „[Support](http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit) right now is Chrome 23.0.1247.0+ (current Canary) and WebKit nightly“? Hätte ich nicht auf den 24er upgraden sollen? Haben die das wieder ausgebaut?  

Da hab ich doch glatt diesen letzten Satz überlesen. Folglich muss ich noch weiter darüber nachdenken, wie ich weiter vorgehe.  
  
MfG  
bubble
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. fixe Menüleiste, beim Scrollen, Leiste "anheften"

      Kai345 Homepage des Autors
      – Informationen zu den Bewertungsregeln

      [latex]Mae  govannen![/latex]

      Warum nicht so?

      <body>

      <header>...</header>
              <nav>...</nav>
              <main role="main">...</main>
      </body>

        
[Deshalb](https://developer.mozilla.org/en-US/docs/HTML/Element/main#Browser_compatibility)  
  
(falsche Syntax-Auszeichnung im gequoteten Text repariert)  
  
Stur lächeln und winken, Männer!  
Kai  

-- 
`var jQuery = $(hit);`{:.language-javascript}  
Wir sind die Schlumpf. Widerschlumpf ist schlumpflos. Wir werden Sie einschlumpfen.  
  
[SelfHTML-Forum-Stylesheet](http://selfhtml.knrs.de/#h_stylesheet)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. fixe Menüleiste, beim Scrollen, Leiste "anheften"

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Kai345:

        nuqneH

        Deshalb

        Was genau willst du damit sagen? Dass Browser noch nicht die ARIA-Rolle implementiert haben? Weiß ich; deshalb ja auch noch @role="main".

        Dass Browser noch keinen Default-Stil für main implementiert haben? Stimmt, man muss noch main { display: block } ins Stylesheet schreiben. Und schon kann man main bedenkenlos verwenden.

        Damit alte IEs die Stil-Regel auch anwenden, muss man natürlich wie für alle anderen in HTML5 neuen Elemente document.createElement ausführen. Im aktuellen html5shiv ist das auch für main bereits drin.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. fixe Menüleiste, beim Scrollen, Leiste "anheften"

          Kai345 Homepage des Autors
          +1 Informationen zu den Bewertungsregeln

          [latex]Mae  govannen![/latex]

          Deshalb

          Was genau willst du damit sagen? Dass Browser noch nicht die ARIA-Rolle implementiert haben? Weiß ich; deshalb ja auch noch @role="main".

          Dass Browser noch keinen Default-Stil für main implementiert haben? Stimmt, man muss noch main { display: block } ins Stylesheet schreiben.

          Eben. Dieser Hinweis fehlte, insofern wäre der OP hier erst einmal übel auf die Nase gefallen. Und nein, das ist kein Grundwissen.

          Und schon kann man main bedenkenlos verwenden.

          Solange der Hickson-Diktator keinen Rappel bekommt und es doch wieder rausschmeißt. ;)

          Damit alte IEs die Stil-Regel auch anwenden, muss man natürlich wie für alle anderen in HTML5 neuen Elemente document.createElement ausführen. Im aktuellen html5shiv ist das auch für main bereits drin.

          Nein. Nur in der Entwickler-Version unter src/, in dist/ fehlt es. Wenn man also die minifizierte Version nutzt (und das will man üblicherweise), fällt man auch hier wieder auf die Nase.

          Die Verwendung von main ist somit durchaus noch mit größeren Fallstricken versehen.

          Stur lächeln und winken, Männer!
          Kai

          --
          var jQuery = $(hit);
          Unsere Identität entnehmen Sie bitte dem beigefügten Auszug aus den Personenstandsbüchern. Gegen die Assimilierung in unser Kollektiv ist nach dem ABGB (§666, Abs. 3/IV) kein Rechtsmittel zulässig. Wir bitten um Ihr Verständnis.
          SelfHTML-Forum-Stylesheet
          Beitrag melden
          +1
          Informationen zu den Bewertungsregeln