Festen header beim scrollen

Habe ich die Kopfzeile einer Tabelle in der Mitte einer Seite, aber da die Seite riesig ist, möchte ich fix den header an die Spitze der browser, während ich nach unten scrollen für die Seite...

Also meine Frage ist: Wie kann ich Kopfzeile normal zu sein, bis der Benutzer scrollt nach unten und dem oberen Rand der Kopf berührt den browser Grenze, wo es soll fixiert bleiben auf dieser position, egal, wie viel weiter unten in der Benutzer scrollt?

mit .scroll() von jquery und setzen an bestimmten Blättern Punkt-Fenster und fügen Sie entweder eine Feste position Klasse, um das Ziel oder tun .css(), um die Ziel-elem

InformationsquelleAutor Nutic | 2012-12-10

Lassen Sie mich erklären, wie dies getan werden könnte.

Schritte

Finden Sie Ihre header-Tabelle, und speichern Sie Ihre position
Einen listener hinzufügen, um das Fenster scroll Veranstaltung.
Überprüfen Sie die Fenster scrollen Sie gegen Ihre Tabellenüberschrift position
1. Wenn die position < window scroll - fügen Sie eine Klasse, um fix in der Kopfzeile der Tabelle
2. Anderes, reset css, Verhalten sich wie eine normale header.

Ich gebucht habe, ein Turnschuh, dass finden Sie hier.

Code-Beispiel

HTML

<div class='lots_of_stuff_in_here'> ... </div>
<table>
    <thead id='my_fixable_table_header'>
        <tr>
            <th>My awsesome header number 1</th>
            <th>My awsesome header number 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        //much more content
    </tbody>
</table>

Javascript

//Just so you get the idea behind the code

var myHeader = $('#my_fixable_table_header');
myHeader.data( 'position', myHeader.position() );
$(window).scroll(function(){
    var hPos = myHeader.data('position'), scroll = getScroll();
    if ( hPos.top < scroll.top ){
        myHeader.addClass('fixed');
    }
    else {
        myHeader.removeClass('fixed');
    }
});

function getScroll () {
    var b = document.body;
    var e = document.documentElement;
    return {
        left: parseFloat( window.pageXOffset || b.scrollLeft || e.scrollLeft ),
        top: parseFloat( window.pageYOffset || b.scrollTop || e.scrollTop )
    };
}

Dies ist, was ich brauche. Jetzt nur, damit es funktioniert in meinem code.
-1: Header-Zellen sollten mit der breiten der Zellen in der gleichen Spalte.
warum nicht Bearbeiten Sie die Antwort anstelle von "-1"?
Ich war auf der Suche an Ihrem Beispiel, wenn Sie versuchen zu bauen, meine eigenen und musste geändert fiddle ein wenig, so dass die Spalten die gleiche geblieben wie der Header beim scrollen. Ich habe einige code, der die Maßnahmen Header und passt diese zu der ersten Zeile der Tabelle, so dass, wenn Sie bewegen Sie den Kopfzeilen behoben werden mit jQuery die Breite der Spalten bleibt die gleiche wie der Header. jsfiddle.net/jbY6X/145

InformationsquelleAutor Jibi Abraham

Du suchst einen horizontal orientierten "sticky-box", die Ihnen folgt unten auf der Seite beim scrollen.

Hier ist eine Exemplarische Vorgehensweise, in dem erläutert wird, wie dieser Effekt für die Seitenleiste: http://css-tricks.com/scrollfollow-sidebar/

Ich veränderte den code für die Arbeit mit einem generischen Beispiel, die sich über die Breite der Seite:

HTML:

<div class="wrapper">
  <div class="head">HEAD</div>
  <div class="header">Table Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

CSS:

.wrapper {
  border:1px solid red;
}
.head{
  height: 100px;
  background: gray;
}
.header {
  background:red;
  height:100px;
  left:0;
  right:0;
  top:0px;
  margin-top:100px;
  position:absolute;
}

.content {
   background:green;
   height:1000px;
}

.footer {
   background:blue;
   height:100px;
}

jQuery:

$(function() {

    var $sidebar = $(".header"),
        $window = $(window),
        offset = $sidebar.offset(),
        topPadding = 0;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                top: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                top: 0
            });
        }
    });

});

Dies animiert den header-block in den Blick, wenn Sie einen Bildlauf jenseits, wo es ursprünglich erscheint.

jsFiddle hier

Betrachten zeigt einige code auf, wie es funktionieren wird. Wenn/falls diese links nicht mehr funktionieren, wird Ihre Antwort nicht hilfreich sein.
Ich brauche so etwas mit jQuery. Ist das möglich mit CSS?
Danke @MikeSmithDev, ich fügte hinzu, ein Beispiel. Nutic, lassen Sie mich wissen, wenn das Sinn macht.
Dies funktioniert aber nur für die <div> tags. Ich Schaffe es nicht zu arbeiten, mit <TH></TH>
Fügen Sie die header Klasse, die mit tr des <th></th>.

InformationsquelleAutor Chris Like

0

können Sie versuchen, schließen Sie den unteren Elementen unter dem header in ein div-dann hinzufügen-Klasse, um das div gesetzt overflow auf auto

InformationsquelleAutor Vainglory07
0

Ich hoffe, Sie sind auf der Suche, wie diese Header-Fix Demo

HTML
```
<div class="wrapper">
<div class="header">Header Fix</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
```
CSS
```
.wrapper {
  border:1px solid red;
}

.header {
  background:red;
  height:100px;
  position:fixed;
  left:0;
  right:0;
  top:0;

}

.content {
   background:green;
   height:1000px;
}

.footer {
   background:blue;
   height:100px;
}
```
Ja und Nein. Ich weiß, wie dies zu tun, aber das problem ist, dass wenn ich die Seite öffnen, habe ich wie 200px von Inhalten vor, die Tabelle. Wenn ich dann scrollen 200px nach unten, ich will, dass table-header-stick auf der Oberseite, nicht zu bleiben, 200px von oben beim scrollen.
also bitte poste deinen kompletten code, wie Sie tun, als werden wir in der Lage sein, Ihnen zu sagen, die Lösung bitter.
tinkerbin.com/rJK990rM Beispiel: es sieht aus wie, dass. Ich will, wenn ich nach unten scrollen, das Teil des KOPFES nach oben geht, und verschwinden, und rot bleibt fest OBEN, nicht fest-und Ausgangsposition.

InformationsquelleAutor Shailender Arora
0

für die Beibehaltung der position der festen von jedem block-element,die Sie benötigen, um die absolute oder die fixed-Eigenschaft in das display-Attribut des Stils,aber vergessen Sie nicht, genügend Platz und brechen die top-Elemente, ansonsten wird es unter dem header-Abschnitt.

InformationsquelleAutor siddharth gupta

$(window).scroll(function() {
 if ($(this).scrollTop() > 100){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

css:

header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}

InformationsquelleAutor Anup

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.