Bootstrap sticky header

by 1eddy87

HTML

<div class="container">

  <h1>Verteilen Sie die Kulturmillionen!</h1>
  <p>
    Das Kulturbudget 2015 ist verabschiedet, die Subventionen sind verteilt. Doch bei der Abteilung Kultur geht es fix weiter: Die nächsten Subventionsverhandlungen stehen bereits an. Das Kunstmuseum Basel etwa braucht ab 2016 mehr Geld, um den Erweiterungsbau
    betreiben zu können. Das Theater Basel muss auf erhofftes Geld aus dem Landkanton verzichten. Sollte das Kulturbudget nicht erhöht werden, steht die Abteilung Kultur vor einer schwierigen Aufgabe.<br> Wir fragen nun Sie, liebe Leserinnen und Leser.
    Wie würden Sie das Geld (hier fixer Betrag eingeben, sobald bekannt) verteilen? In unserem Spiel können Sie es ausprobieren – Einsparungen vornehmen und das so gewonnene Geld neu verteilen.<br><br>
    <b>Die Spielregeln</b><br> Das gesamte Budget ist auf die verschiedenen Sparten verteilt. Am Anfang haben alle aufgelisteten Institutionen die vollen Subventionen (1). Sie können die Hälfte davon streichen (1/2) oder die ganzen (0). Veränderungen
    werden am Gesamtbalken sofort sichtbar. Am Schluss des ersten Teiles des Spieles sehen Sie, wieviel Sie gespart haben. Im zweiten Teil können Sie dieses Budget wieder neu verteilen.<br> Vergessen Sie nicht: Das Ganze ist ein Spiel! Die konkreten Auswirkungen
    von Budgetkürzungen können wir Ihnen leider nicht liefern – doch sie würden von Teileinsparungen bis hin zur Bankrotterklärung reichen. Sie haben es in der Hand.<br> Viel Spass!
  </p>
  <div class="wrapper">

    <h4 style="margin-top:0">Ausgaben in Millionen Franken</h4>

    <div class="background">
      <div id="kunstmuseum"></div>
      <div id="historisch"></div>
      <div id="naturhist"></div>
      <div id="kulturen"></div>
      <div id="antik"></div>
      <div id="beyeler"></div>
      <div id="weitereMuseen"></div>
      <div id="theaterBasel"></div>
      <div id="kaserne"></div>
      <div id="weitereTheater"></div>
      <div id="sinfonie"></div>
      <div...

CSS

/* modified css */

.container {
  padding-left: 0;
  padding-right: 0;
}

.wrapper {
  width: 100%;
  height: 180px;
  background-color: #fff;
  border-top: 0;
  -webkit-box-shadow: 0 8px 6px -6px #B8B8B8;
  -moz-box-shadow: 0 8px 6px -6px #B8B8B8;
  box-shadow: 0 8px 6px -6px #B8B8B8;
}

.sticky {
  width: inherit;
  position: fixed;
  top: 0;
  /*padding-right:30px;*/
  z-index: 100;
  border-top: 0;
}

@media(max-width: 768px) {
  .sticky {
    width: 100%;
  }
}

/* rest of the original css */

#kunstmuseum {
  left: 0;
  top: 0;
  height: 80px;
  width: 11.5%;
  background-color: #334D5C;
  white-space: normal;
  display: inline-block;
  border-top: 0;
}

#historisch {
  left: 0;
  top: 0;
  height: 80px;
  width: 8.5%;
  background-color: #334D5C;
  white-space: normal;
  display: inline-block;
  border-top: 0;
}

#naturhist {
  left: 0;
  top: 0;
  height: 80px;
  width: 7%;
  background-color: #334D5C;
  white-space: normal;
  display: inline-block;
  border-top: 0;
}

#kulturen {
  left: 0;
  top: 0;
  height: 80px;
  width: 7%;
  background-color: #334D5C;
  white-space: normal;
  display: inline-block;
  border-top: 0;
}

#antik {
  left: 0;
  top: 0;
  height: 80px;
  width: 4.5%;
  background-color: #334D5C;
  white-space: normal;
  display: inline-block;
  border-top: 0;
}

#beyeler {
  left: 0;
  top: 0;
  height: 80px;
  width: 1.6%;
  background-color: #334D5C;
  white-space: normal;
  display: inline-block;
  border-top: 0;
}

#weitereMuseen {
  left: 0;
  top: 0;
  height: 80px;
  width: 1.6%;
  background-color: #334D5C;
  white-space: normal;
  display: inline-block;
  border-top: 0;
}

#theaterBasel {
  left: 0;
  top: 0;
  height: 80px;
  width: 28.2%;
  background-color: #45B29D;
  white-space: normal;
  display: inline-block;
  border-top: 0;
}

#kaserne {
  left: 0;
  top: 0;
  height: 80px;
  width: 1.8%;
  background-color: #45B29D;
  white-space: normal;
  display: inline-block;
  border-top: 0;
}

#weitereTheater {
  left: 0;
  top:...

JavaScript

var mapping = {
  kunstmuseum: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  historisch: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  naturhist: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  kulturen: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  antik: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  beyeler: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  weitereMuseen: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  theaterBasel: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  kaserne: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  weitereTheater: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  sinfonie: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  jazz: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  rock: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  literatur: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  erbe: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  wettbewerb: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  weiteres: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  },
  zoo: {
    voll: 0,
    halb: 0.5,
    nichts: 1
  }
};



var global = {};

$(document).ready(function() {

  var element = $(".wrapper");
  offset = element.offset();

  global.top = offset.top;
  global.height = element.outerHeight();

});

$(window).scroll(function() {

  var scroll_top = $(document).scrollTop();

  if (scroll_top > global.top) {
    $('.wrapper').addClass('sticky');
    $("body").css({
      "padding-top": global.height
    });

  } else {

    $('.wrapper').removeClass('sticky');
    $("body").css({
      "padding-top": 0
    });
  }

});