Wie kann ich den Header statisch halten, während ich scrolle?

71

Wie würde ich verhindern, dass ich headermit dem Rest der Seite scrolle? Ich dachte darüber nach , etwas zu nutzen, frame-setsund iframesfragte mich nur, ob es einen einfacheren und benutzerfreundlicheren Weg gibt. Was wäre die beste Vorgehensweise dafür?

javascript html css David
quelle
2
Was meinst du damit header? Von einer Seite? Von einem Tisch?
BrunoLM
Siehe auch
AlikElzin-kilaka

Antworten:

83

Verwenden Sie position: fixedauf dem div, der Ihren Header enthält, mit so etwas wie

#header {
  position: fixed;
}

#content {
  margin-top: 100px;
}

In diesem Beispiel bleibt der #contentStartpunkt 100px #header, während der Benutzer einen Bildlauf durchführt , #headeran Ort und Stelle. Natürlich ist es selbstverständlich, dass Sie sicherstellen möchten, dass #headerein Hintergrund vorhanden ist, damit der Inhalt tatsächlich sichtbar ist, wenn sich die beiden divüberlappen. Schauen Sie sich die positionImmobilie hier an: http://reference.sitepoint.com/css/position

Yi Jiang
quelle
5
in Abhängigkeit von der Beziehung zwischen Ihrem divs, müssen Sie hinzufügen , margin-top: -100px;um die #headeres zurück zu bekommen , wo Sie es wollen.
Rymo
Kennen Sie eine Möglichkeit, es scrollen zu lassen, bis es oben ankommt, und dann "position: fixed;"? Wenn Ihr Header unten beginnt?
Seth Urquhart
Es ist für mich nicht in der DIV-Breite enthalten.
SearchForKnowledge
Diese Lösung erfordert die Definition einer fest codierten Größe. Gibt es eine Möglichkeit, dies ohne eine fest codierte Größe zu tun? Vielleicht indem man ein Div so definiert, dass es unter einem anderen liegt? Vielleicht eine Beziehung zwischen Header und Inhalt ohne fest codierte Werte?
AlikElzin-Kilaka
@ AlikElzin-kilaka Nicht wirklich, nein. Wenn Sie ein Element so einstellen, dass es position: fixedeffektiv ist, wird es aus dem Fluss entfernt, was bedeutet, dass es für andere Elemente keinen Platz mehr einnimmt. Was Sie suchen, ist position: sticky, dass leider noch keine breite Browser-Unterstützung hat
Yi Jiang
13

In modernen, unterstützten Browsern können Sie dies einfach in CSS mit - tun

header{
  position: sticky;
  top: 0;
}

Hinweis : Die HTML-Struktur ist bei der Verwendung wichtig position: sticky, da das Element dadurch relativ zum übergeordneten Element klebrig wird. Und die klebrige Positionierung funktioniert möglicherweise nicht mit einem einzelnen Element, das innerhalb eines Elternteils klebrig gemacht wurde.

Führen Sie das folgende Snippet aus, um eine Beispielimplementierung zu überprüfen.

main{
padding: 0;
}
header{
position: sticky;
top:0;
padding:40px;
background: lightblue;
text-align: center;
}

content > div {
height: 50px;
}
<main>
<header>
This is my header
</header>
<content>
<div>Some content 1</div>
<div>Some content 2</div>
<div>Some content 3</div>
<div>Some content 4</div>
<div>Some content 5</div>
<div>Some content 6</div>
<div>Some content 7</div>
<div>Some content 8</div>
</content>
</main>
Erweitern Sie das Snippet

Vandesh
quelle
9 

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  z-index: 10;
  background: #eeeeee;
  -webkit-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
}

.header__content-text {
  text-align: center;
  padding: 15px 20px;
}

.page__content-container {
  margin: 100px auto;
  width: 975px;
  padding: 30px;
}
<div class="header">
  <h1 class="header__content-text">
    Header content will come here
  </h1>
</div>
<div class="page__content-container">
  <div style="height:600px;">
    <a href="http://imgur.com/k9hz3">
      <img src="http://i.imgur.com/k9hz3.jpg" title="Hosted by imgur.com" alt="" />
    </a>
  </div>
  <div style="height:600px;">
    <a href="http://imgur.com/TXuFQ">
      <img src="http://i.imgur.com/TXuFQ.jpg" title="Hosted by imgur.com" alt="" />
    </a>
  </div>
</div>
Erweitern Sie das Snippet

Suresh Pattu
quelle
6

Wenn Sie bootstrap3 verwenden können, können Sie CSS "navbar-fixed-top" verwenden. Außerdem müssen Sie unten CSS hinzufügen, um den Seiteninhalt nach unten zu verschieben

body{

   margin-top:100px;
}
richpalsingh
quelle
4

Hier ist eine mit CSS + JQuery (Javascript) -Lösung.

Hier ist Demo Link Demo

//html

<div id="uberbar">
    <a href="#top">Top of Page</a>
    <a href="#bottom">Bottom of Page</a>

</div>

//css 

#uberbar    { 
    border-bottom:1px solid #eb7429; 
    background:#fc9453; 
    padding:10px 20px; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:2000; 
    width:100%;
}

//jquery

$(document).ready(function() {
    (function() {
        //settings
        var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
        var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
        var inside = false;
        //do
        $(window).scroll(function() {
            position = $(window).scrollTop();
            if(position > topDistance && !inside) {
                //add events
                topbarML();
                $('#uberbar').bind('mouseenter',topbarME);
                $('#uberbar').bind('mouseleave',topbarML);
                inside = true;
            }
            else if (position < topDistance){
                topbarME();
                $('#uberbar').unbind('mouseenter',topbarME);
                $('#uberbar').unbind('mouseleave',topbarML);
                inside = false;
            }
        });
    })();
});
Pramendra Gupta
quelle
2

Nachdem ich alle Antworten durchgesehen hatte, fand ich einen etwas anderen Weg mit minimalem CSS und ohne JS. #contentIn diesem Fall muss nur die Höhe des Headers korrekt eingestellt werden60px

CSS:

#header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10;
}
#content {
  margin-top: 60px;
  z-index:1;
}

HTML:

<body>
  <div id="header" style="background-color:GRAY; text-align:center; border-bottom:1px SOLID BLACK; color:WHITE; line-height:50px; font-size:40px">
     My Large Static Header
  </div>
  <div id="content">
     <!-- All page content here -->
  </div>
</body>
ChrisAdmin
quelle
1

Anstatt mit Positionierung und Polsterung / Rand zu arbeiten und ohne die Größe der Kopfzeile zu kennen, gibt es eine Möglichkeit, die Kopfzeile durch Spielen mit der Schriftrolle festzuhalten.

Sehen Sie diesen Plunker mit einem festen Header:

<html lang="en" style="height: 100%">
<body style="height: 100%">
<div style="height: 100%; overflow: hidden">
  <div>Header</div>
  <div style="height: 100%; overflow: scroll">Content - very long Content...

Der Schlüssel hier ist eine Mischung aus height: 100%mit overflow.

Sehen Sie sich hier eine spezielle Frage zum Entfernen der Schriftrolle aus der Kopfzeile an und beantworten Sie diese hier .

AlikElzin-Kilaka
quelle
Eine problematische Lösung. Es scheint, dass der untere Rand des Inhalts unter das Fenster geschoben wird. Sie können es deutlicher sehen, wenn Sie den Header höher machen. Irgendeine Idee, wie man das löst?
AlikElzin-Kilaka
Dies scheint gut zu funktionieren, aber die Schriftrolle wird auf meinem iPhone5 sehr langsam.
Alain Zelink
@AlainZelink - Welche Browser-App verwenden Sie auf einem iPhone5?
AlikElzin-Kilaka
-6

Ich persönlich brauchte eine Tabelle, in der sowohl die linke als auch die obere Überschrift jederzeit sichtbar waren. Inspiriert von mehreren Artikeln, denke ich, dass ich eine gute Lösung habe, die Sie vielleicht hilfreich finden. Diese Version hat nicht das Umbruchproblem, das andere Lösungen mit schwebenden Divs oder flexibler / automatischer Größenanpassung von Spalten und Zeilen haben.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script language="javascript" type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script>
    <script language="javascript" type="text/javascript">
        // Handler for scrolling events
        function scrollFixedHeaderTable() {
            var outerPanel = $("#_outerPanel");
            var cloneLeft = $("#_cloneLeft");
            var cloneTop = $("#_cloneTop");
            cloneLeft.css({ 'margin-top': -outerPanel.scrollTop() });
            cloneTop.css({ 'margin-left': -outerPanel.scrollLeft() });
        }

        function initFixedHeaderTable() {
            var outerPanel = $("#_outerPanel");
            var innerPanel = $("#_innerPanel");
            var clonePanel = $("#_clonePanel");
            var table = $("#_table");
            // We will clone the table 2 times: For the top rowq and the left column. 
            var cloneLeft = $("#_cloneLeft");
            var cloneTop = $("#_cloneTop");
            var cloneTop = $("#_cloneTopLeft");
            // Time to create the table clones
            cloneLeft = table.clone();
            cloneTop = table.clone();
            cloneTopLeft = table.clone();
            cloneLeft.attr('id', '_cloneLeft');
            cloneTop.attr('id', '_cloneTop');
            cloneTopLeft.attr('id', '_cloneTopLeft');
            cloneLeft.css({
                position: 'fixed',
                'pointer-events': 'none',
                top: outerPanel.offset().top,
                'z-index': 1 // keep lower than top-left below
            });
            cloneTop.css({
                position: 'fixed',
                'pointer-events': 'none',
                top: outerPanel.offset().top,
                'z-index': 1 // keep lower than top-left below
            });
            cloneTopLeft.css({
                position: 'fixed',
                'pointer-events': 'none',
                top: outerPanel.offset().top,
                'z-index': 2 // higher z-index than the left and top to make the top-left header cell logical
            });
            // Add the controls to the control-tree
            clonePanel.append(cloneLeft);
            clonePanel.append(cloneTop);
            clonePanel.append(cloneTopLeft);
            // Keep all hidden: We will make the individual header cells visible in a moment
            cloneLeft.css({ visibility: 'hidden' });
            cloneTop.css({ visibility: 'hidden' });
            cloneTopLeft.css({ visibility: 'hidden' });
            // Make the lef column header cells visible in the left clone
            $("#_cloneLeft td._hdr.__row").css({
                visibility: 'visible',
            });
            // Make the top row header cells visible in the top clone
            $("#_cloneTop td._hdr.__col").css({
                visibility: 'visible',
            });
            // Make the top-left cell visible in the top-left clone
            $("#_cloneTopLeft td._hdr.__col.__row").css({
                visibility: 'visible',
            });
            // Clipping. First get the inner width/height by measuring it (normal innerWidth did not work for me)
            var helperDiv = $('<div style="positions: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%;"></div>');
            outerPanel.append(helperDiv);
            var innerWidth = helperDiv.width();
            var innerHeight = helperDiv.height();
            helperDiv.remove(); // because we dont need it anymore, do we?
            // Make sure all the panels are clipped, or the clones will extend beyond them
            outerPanel.css({ clip: 'rect(0px,' + String(outerPanel.width()) + 'px,' + String(outerPanel.height()) + 'px,0px)' });
            // Clone panel clipping to prevent the clones from covering the outerPanel's scrollbars (this is why we use a separate div for this)
            clonePanel.css({ clip: 'rect(0px,' + String(innerWidth) + 'px,' + String(innerHeight) + 'px,0px)'   });
            // Subscribe the scrolling of the outer panel to our own handler function to move the clones as needed.
            $("#_outerPanel").scroll(scrollFixedHeaderTable);
        }


        $(document).ready(function () {
            initFixedHeaderTable();
        });

    </script>
    <style type="text/css">
        * {
            clip: rect font-family: Arial;
            font-size: 16px;
            margin: 0;
            padding: 0;
        }

        #_outerPanel {
            margin: 0px;
            padding: 0px;
            position: absolute;
            left: 50px;
            top: 50px;
            right: 50px;
            bottom: 50px;
            overflow: auto;
            z-index: 1000;
        }

        #_innerPanel {
            overflow: visible;
            position: absolute;
        }

        #_clonePanel {
            overflow: visible;
            position: fixed;
        }

        table {
        }

        td {
            white-space: nowrap;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            padding: 2px 2px 2px 2px;
        }

        td._hdr {
            color: Blue;
            font-weight: bold;
        }
        td._hdr.__row {
            background-color: #eee;
            border-left: 1px solid #000;
        }
        td._hdr.__col {
            background-color: #ddd;
            border-top: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="_outerPanel">
        <div id="_innerPanel">
            <div id="_clonePanel"></div>
            <table id="_table" border="0" cellpadding="0" cellspacing="0">
                <thead id="_topHeader" style="background-color: White;">
                    <tr class="row">
                        <td class="_hdr __col __row">
                            &nbsp;
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                        <td class="_hdr __col">
                            TOP HEADER
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr class="row">
                        <td class="_hdr __row">
                            MY HEADER COLUMN:
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                    </tr>
                    <tr class="row">
                        <td class="_hdr __row">
                            MY HEADER COLUMN:
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                        <td class="col">
                            The quick brown fox jumps over the lazy dog.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="_bottomAnchor">
        </div>
    </div>
</body>
</html>
Niels Bos
quelle