Problem mit fester Kopfzeile - kein horizontaler Bildlauf

Question

Problem mit fester Kopfzeile - kein horizontaler Bildlauf

Gefragt el 23 de Marsch, 2012: Wann wurde die Frage gestellt
9756 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich muss die Kopfzeile sichtbar machen, während der Benutzer die Seite durchblättert. Ich setze die Kopfzeile auf eine feste Position und sie bleibt beim Scrollen, aber wenn ich die Größe des Browsers ändere, erhalte ich keine horizontale Bildlaufleiste, so dass ich zum Beispiel nicht alle Elemente in der Navigation sehen kann.

<body>    
        <header>
            <div id="topHeader">
                <p>test</p>
            </div>
                <nav>
                    ... navigation items ...
                </nav>            
        </header>
        <div id="content">
            @RenderBody()
        </div>    
</body>

css

#content{margin-top:80px;}
#topHeader{width: 100%; background: #262626; height: 40px;margin:0;}
header
{   
    width: 100%;
    position: fixed;
    top: 0;
}

Gefragt el 23 de Marsch, 2012 von 1110

Answer 1

5 Antworten

Answer 2

3voto

Chris B. Punkte 372

So funktionierte das Verhalten des Facebook-Headers bei mir

<div id="headercontainer" style="position: fixed; width: 100%">
  <div id="actualheader" style="position: relative; width: 1000px; margin: 0 auto">
  </div>
</div>

mit dem folgenden jquery:

<SCRIPT>
    $(window).scroll(function() {
    $('#actualheader').css('left', -$(this).scrollLeft() + "px");
    });
</SCRIPT>

Noch nicht auf Kompatibilität getestet

Beantwortet el 13 de Juli, 2013 von Chris B. (372 Punkte )

Answer 3

2voto

user1289347 Punkte 2422

Das ist in html/css nicht möglich. Gehe zu diese Seite und das Browser-Fenster ganz nach unten schrumpfen, ist die Fußzeile fest positioniert und der Inhalt auf der rechten Seite geht verloren, aber wenn Sie die horizontale Bildlaufleiste verwenden, bewegt sie sich. Ich habe das mit Jquery gemacht. Hier ist der Code, den ich verwendet habe. Grundsätzlich bewege ich, was innerhalb der festen div in Bezug auf die Windows-Scroll-Position ist.

    if ($(window).width() < 990) {
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
  }
$(window).scroll(function() {
  if ($(window).width() < 990) {
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
  }
  else {
    $('#copyright').css({ 'left': '20px' });
    $('#click-to-call, #erving').css({ 'right': '20px' });
  }
});

});

Beantwortet el 24 de Marsch, 2012 von user1289347 (2422 Punkte )

Answer 4

0voto

Matthew Darnell Punkte 4538

Sie setzen die Breite auf 100%, was in diesem Fall 100% des Ansichtsfensters bedeutet. Das Element wird nicht über diesen Punkt hinaus erweitert, was bedeutet, dass keine horizontale Bildlaufleiste.

Sie sollten wirklich nicht etwas am Ansichtsfenster befestigen, das nicht in das Fenster passt. Erwägen Sie das Hinzufügen einer Art von Pfeilen, um die Navigation zu verschieben, wenn sie zu groß wird.

Beantwortet el 23 de Marsch, 2012 von Matthew Darnell (4538 Punkte )

Answer 5

0voto

Richard Andrew Lee Punkte 1187

Verwenden Sie min-width. und geben Sie älteren Browsern eine andere Erfahrung, Oder Sie können einige js schreiben, um die Kopfzeile nicht immer kleiner als [Zahl] zu bekommen. Diese Lösung sollte das Problem beheben für Moderne Browser .

header{   
    min-width:960px;
    width: 100%;
    position: fixed;
    top: 0;
}

Beantwortet el 23 de Marsch, 2012 von Richard Andrew Lee (1187 Punkte )

Answer 6

0voto

MarkMeikle Punkte 1

Nicht perfekt, aber für mich hat das funktioniert. Ich habe diese Java-Funktion positionContentBelowHeader geschrieben, um den Rand der Inhaltstabelle so zu vergrößern, dass sie direkt unter der festen Kopfzeile angezeigt wird.

Stellen Sie Ihre feste Kopfzeile so ein, dass sie keine Mindestbreite hat, und sie wird sehr klein, wenn das Fenster verkleinert wird. Rufen Sie dann die Funktion position content im Ereignis body resize auf. Auf diese Weise wird zumindest nichts abgeschnitten, und der Inhalt gleitet nach unten, um für die größere, verdichtete feste Kopfzeile anzupassen.

In asp.net-Code hinter, ich habe auch dies hinzufügen, um die Position Funktion auf Seite rendern laufen

'Save dynamic employee panel height into property using javascript.
Page.ClientScript.RegisterStartupScript(Me.GetType(), "positionContentBelowHeader", "positionContentBelowHeader();", True)

Ich lege dies in den Körper

id="objMasterPageBody" onresize="positionContentBelowHeader()";

>

           <script type="text/javascript">

               function positionContentBelowHeader() 
               {
                    //Set header height
                    var headerHeight = document.getElementById('<%= TableHeader.ClientID %>').clientHeight;
                    document.getElementById('<%= hidHeaderHeight.ClientID %>').value = headerHeight;            //margin: 0px auto 0px auto; height: 100%;
                    document.getElementById('<%= TableContent.ClientID %>').setAttribute("style", "height: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: " + headerHeight.toString() + "px");

               }

            </script>

Beantwortet el 30 de Januar, 2013 von MarkMeikle (1 Punkte )

Problem mit fester Kopfzeile - kein horizontaler Bildlauf

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Problem mit fester Kopfzeile - kein horizontaler Bildlauf

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: