Skip to content
HTML.dk logo
  • Snippets
  • Tutorials
    • Lav din egen hjemmeside
    • Tjene penge på nettet
    • Guide til HTML
    • Guide til CSS
    • Artikler
  • Nyheder
  • Bidrag til sitet
Søgning

Sticky (frosne) overskrift-rækker på html-tabeller

  • HTML.dk
  • 24. april 20192. oktober 2019
  • jQuery / JavaScript snippets

Du kender det måske fra Excel, hvor du i en tabel kan fryse f.eks. den øverst række, så den følger med ned, når du scroller ned igennem din tabel. Dette er faktisk også muligt, hvis du har en tabel på din hjemmeside. Du skal blot bruge nedenstående script.

function UpdateTableHeaders() {
   $("div.divTableWithFloatingHeader").each(function() {
       offset = $(this).offset();
       scrollTop = $(window).scrollTop();
       if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {
           $(".tableFloatingHeader", this).css("visibility", "visible");
           $(".tableFloatingHeader", this).css("top", Math.min(scrollTop - offset.top, $(this).height() - $(".tableFloatingHeader", this).height()) + "px");
       }
       else {
           $(".tableFloatingHeader", this).css("visibility", "hidden");
           $(".tableFloatingHeader", this).css("top", "0px");
       }
   })
}

$(document).ready(function() {
   $("table.tableWithFloatingHeader").each(function() {
       $(this).wrap("<div class="divTableWithFloatingHeader" style="position:relative"></div>");
       $("tr:first", this).before($("tr:first", this).clone());
       clonedHeaderRow = $("tr:first", this)
       clonedHeaderRow.addClass("tableFloatingHeader");
       clonedHeaderRow.css("position", "absolute");
       clonedHeaderRow.css("top", "0px");
       clonedHeaderRow.css("left", "0px");
       clonedHeaderRow.css("visibility", "hidden");
   });
   UpdateTableHeaders();
   $(window).scroll(UpdateTableHeaders);
});

Se demo her

Denne snippet blev indsendt af A-kasser på Gust.com


Standard sidesstruktur i HTML5
Skrivende tekst effekt med CSS

Seneste artikler

  • Guide: Vælg den rigtige webshop løsning til din webshop!
  • Lækker, responsive modal-popup
  • Få det økonomiske overblik med et regnskabsprogram
  • Sådan skaber du det perfekte hjemmekontor
  • Onlinelån: Alt du skal vide

Mere fra HTML.dk

  • Alle snippets 24
  • Artikler 70
  • CSS snippets 13
  • HTML snippets 4
  • jQuery / JavaScript snippets 6
  • Nyheder 14
  • Scripts 1
  • Tutorials 7
  • Uncategorized 1
  • WordPress snippets 1

Kontakt

HTML.dk
Ceres Allé 7
Aarhus C
Skriv til os

Links

Om HTML.dk
Skriv til os!
Send et bidrag
Nyheder
Snippets

Nyt indhold fra HTML.dk

  • Guide: Vælg den rigtige webshop løsning til din webshop!
  • Lækker, responsive modal-popup
  • Få det økonomiske overblik med et regnskabsprogram
  • Sådan skaber du det perfekte hjemmekontor
  • Onlinelån: Alt du skal vide
  • Brug Corona-karantæne fornuftigt: lær mere om kodning og aktier

HTML logo big