Schwebende Menüleiste mit HTML/CSS?

Question

Schwebende Menüleiste mit HTML/CSS?

Gefragt el 15 de Marsch, 2011: Wann wurde die Frage gestellt
30839 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich frage mich, ob jemand eine Möglichkeit kennt, eine schwebende Menüleiste zu erstellen, die an einem Punkt auf einer Seite haften bleibt, bis das Browserfenster weit genug unten auf der Seite ist und es aufhebt, und dann beginnt die Menüleiste, mit ihr zu scrollen. Der gewünschte Effekt ist genau derselbe wie dieser http://www.jtricks.com/javascript/navigation/floating.html javascript menü. Allerdings möchte ich wirklich, dies mit CSS zu tun. Ich bin mir bewusst, ich kann die div absolut positioniert und es wird nach unten die Seite zu bewegen, habe ich versucht, eine DIV relativ positioniert (Eltern-Div) und dann ein anderes Div innerhalb dieser, die absolut positioniert wurde, aber ich konnte nicht bekommen, dies zu arbeiten. Weiß jemand, wie man diese Arbeit mit CSS zu machen oder muss es JS sein?

Vielen Dank im Voraus.

Jon.

Gefragt el 15 de Marsch, 2011 von Jon Kyte

Answer 1

5 Antworten

Answer 2

9voto

agradl Punkte 3518

Ich glaube, die Verwendung von Javascript ist die einzige Lösung, um den von Ihnen beschriebenen Effekt zu erzielen. Hier ist eine schnelle Demo eines Banners, das an einer absoluten Position beginnt und zu einer festen Position wechselt, wenn der Benutzer einen Bildlauf durchführt.

<div style="height:1000px;width:500px;">

    <div id="floatbar" style="background:gray;
                                width:200px;
                                height:40px;
                                position:absolute;
                                left:0;top:200px;">
    </div>
</div>

$(window).scroll(function(){
    if ($(window).scrollTop() >= 200)
    {
        $("#floatbar").css({position:'fixed',left:'0',top:'0'});
    }
    else
    {
        $("#floatbar").css({position:'absolute',left:'0',top:'200px'});
    }
});

Beantwortet el 15 de Marsch, 2011 von agradl (3518 Punkte )

Answer 3

3voto

Naftali Punkte 141792

Wenn Sie die Animation NICHT brauchen, dann verwenden Sie einfach
position: fixed;
in der Css.

wenn Sie es animiert haben wollen, müssen Sie Javascript verwenden. zum Beispiel in Jquery:

$(window).scroll(function(){
   $('#menu').css({
       right: 0,
       top: 0
   })
})

Beantwortet el 15 de Marsch, 2011 von Naftali (141792 Punkte )

Answer 4

1voto

Stanislav Ageev Punkte 778

Nun, man kann es nicht mit einem absolut positionierten Div innerhalb eines relativen tun. Feste Position ist im Grunde ein absolut positioniertes div, relativ zum Fenster positioniert. Ich würde sagen, Sie brauchen definitiv Javascript hier.

Beantwortet el 15 de Marsch, 2011 von Stanislav Ageev (778 Punkte )

Answer 5

1voto

Kory Punkte 398

Mit einer festen Seitenleiste und einem schwebenden Inhaltsbereich sollte dies recht einfach sein. Versuchen Sie etwas wie dies...

#container {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

#sidenav {
    width: 300px;
    position: fixed; /*--Fix the sidenav to stay in one spot--*/
    float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}

#content {
    float: right; /*--Keeps content to the right side--*/
    width: 620px;
    padding: 0 20px 20px;
}

Beantwortet el 15 de Marsch, 2011 von Kory (398 Punkte )

Answer 6

1voto

Estin Chin Punkte 741

Dies ist ein alter Beitrag, aber CSS hat sich seither stark verändert, wir können ein schwebendes Menü mit einfachem CSS erstellen. Siehe Beispielcode unten. Kredit zu https://www.quackit.com/css/codes/css_floating_menu.cfm

  main {
    margin-bottom: 200%;
  }
  .floating-menu {
    font-family: sans-serif;
    background: yellowgreen;
    padding: 5px;;
    width: 130px;
    z-index: 100;
    position: fixed;
    right: 0px;/* You can change float left/right */
  }
  .floating-menu a, 
  .floating-menu h3 {
    font-size: 0.9em;
    display: block;
    margin: 0 0.5em;
    color: white;
  }

<!DOCTYPE html>
<title>Example</title>

<main>
  <p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>
  <nav class="floating-menu">
    <h3>Floating Menu</h3>
    <a href="http://stackoverflow.com/css/">CSS</a>
    <a href="http://stackoverflow.com/html/">HTML</a>
    <a href="http://stackoverflow.com/database/">Database</a>
  </nav>
</main>

Beantwortet el 6 de Juli, 2021 von Estin Chin (741 Punkte )

Schwebende Menüleiste mit HTML/CSS?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Schwebende Menüleiste mit HTML/CSS?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: