Ostatnio natrafiłem na problem z linkowaniem do treści na jednej stronie WWW, na której wykorzystywałem element z fixowany na górze strony.
Z fixowany – mam na myśli ten element jak na przykład w bootstrap:
Jest on ustawiony na sztywno na pozycji określonej i niezależnie jak będziemy stronę przewijać on zawsze tam będzie.
Problem polega na tym, że ten element zajmuje przestrzeń, w bootstrap jest ona mała, ma coś około 40px, u nas zaś w zależności od subnav dochodziliśmy do 60-70px (nie dyskutujmy dlaczego… proszę). To powodowało, że jak linkowaliśmy do elementu o ID #sekcja, header sekcji był wyświetlany pod naszym z fixowanym elementem.
Jednym rozwiązaniem (jaki stosuje bootstrap) jest ustawienie odpowiednich paddingów i margins na elementach header. To się sprawdza dla 40px, ale dla 70 już nie – przerwa pomiędzy jednym nagłówkiem a drugim jest po prostu za duża.
Drugim rozwiązaniem jest niestety hack JavaScriptowy.
Kod wygląda tak:
(function (window, $, undefined) {
'use strict';
$(function () {
var $window = $(window),
elementHeight = $('.topbar').height();
function fixHashLinking() {
var $hash = $(window.location.hash),
fixedTop;
if (window.location.hash && $hash.length) {
fixedTop = $hash.offset().top - elementHeight;
$window.scrollTop(fixedTop);
}
}
$window.bind('hashchange', function () {
fixHashLinking();
});
fixHashLinking();
});
})(window, jQuery);
Wystarczy, że dla elementHeight odejmiemy odpowiednie elementy które stanowią tą część fixed.
Przykładowy JS Fiddle:
Link do JS Fiddle.
Jeżeli poszukujecie przykładu problemu z fixed, nie trzeba szukać daleko, na przykład ten o to link wyświetli wam tytuł Smoother code formatting pod top menu.
