Bootstrap 3 - pływająca stopka

Question

Chciałbym wzór na mojej stronie, gdzie stopka jest zawsze obecna na ekranie i pływa. Gdy użytkownik przewija w dół, stopka porusza się razem z nimi. Nie sprzedałem się w tej sprawie - ale właśnie tam chciałem się połączyć z korporacyjnymi materiałami. Jeśli jest to zły pomysł, daj mi znać ograniczenia (na komórkę może?).

Widziałem projekty i przykłady, które mają stopkę u dołu strony, ale jeśli jest to "pod spodem", użytkownik musi przewinąć w dół, aby go zobaczyć. Niedobrze.

Czy ktoś może podać mi podstawy tego, w jaki sposób się to odbywa?

Z góry dziękuję.

Answer 1

Bootstrap ma klasę, która robi to, co chcesz: .navbar-fixed-bottom. Używanie tej klasy jest lepszym rozwiązaniem, ponieważ nie potrzebujesz niestandardowego css.

Jeśli jednak chcesz użyć niestandardowego CSS, oto jak to zrobić. Zakładając, że element, stopki ma ID „stopki”:

#footer { 
    position: fixed; 
    width: 100%; 
    bottom: 0; 
} 

I trzeba się upewnić, że gdy użytkownik przewija do dołu strony stopka nie pożądaj najniższą zawartość. Aby uniknąć tego, najprostszym rozwiązaniem jest dodanie dolnego marginesu do elementu ciała w takiej samej wysokości, jak wysokość stopki. Zakładając, że element, stopki jest 100px wysoki można użyć tego kodu:

body { 
    margin-bottom: 100px; 
} 

Ale upewnij się uniknąć stopkę pokrywają trzeba by użyć jQuery zaktualizować dolnego marginesu organizmu na zmiany rozmiaru ekranu, ponieważ wysokość stopki można zmienić, zwłaszcza w układach responsywnych.