Forum PHP.pl > Scroll i znikający nagłówek. Co zrobić by header był zawsze widoczny?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Scroll i znikający nagłówek. Co zrobić by header był zawsze widoczny?

Bart123

10.09.2014, 20:35:24

Tak jak w tytule. Powiedzmy, że zjeżdżam scrollem w dół i tym samym nagłówek znika mi z widoku. Mógłbym użyć position: fixed, ale chciałbym, żeby nagłówek zjeżdżał dopiero wtedy, kiedy już całkiem zniknie ze strony.

Podobny efekt jest wykorzystany np. na Facebooku, gdzie przydatne opcje z góry strony cały czas są widoczne na szczycie przeglądarki, nawet jak zjedziemy na sam dół. Można to też porównać do blokowania nagłówka tabeli w excelu. Właściwie to jest dokładnie to, bo chodzi o to samo.

Czy taki efekt można osiągnąć w CSS?

Osoby chcące pomóc, bardzo proszę o pomoc.

Pozdrawiam wszystkich.

rad11

10.09.2014, 20:49:55

http://jsfiddle.net/Ms3SG/69/ Cos takiego ? W css watpie aby mozna bylo uzyskac taki efekt

Bart123

10.09.2014, 21:02:13

Dzięki za podpowiedź

Skoro się nie da w css - będziemy się bawić w JS. Life is brutal

Trzeba będzie się po prostu nauczyć.

php__amator

11.09.2014, 21:06:04

A ja zrobiłem coś takiego w ten sposób:
zawartość header umieściłem w div="fixed" i ustawiłem z parametrem position: fixed a body ustawiłem margin-top: xxx px; tak aby zawartość zaczynała/chowała tuż pod headerem

i jak skrolujesz to nie włazi pod header
przez co początkowa zawartość jest zawsze widoczna w całości po załadowaniu strony:)
Może nie najlepsze rozwiązanie ale umnie się sprawdza

[HTML] pobierz, plaintext 
<style type="text/css">
body {
	margin-left: 10px;
	margin-top: 290px;
	color: rgba(000,255,255,0.8);
	text-shadow: rgba(000,000,000,0.4);
	scrollbar-face-color: #036;
	background-image: url(../images/back.png);
	font-family: Arial;
	text-align: left;
}
#fixed {
	position:fixed;
	top: 10px;
	left: 10px;
	z-index: 100;
}
</style>
<body>
<div id="fixed">Nagłówek</div>
 
</body>
[HTML] pobierz, plaintext

Bart123

18.09.2014, 17:42:48

Kumam o co chodzi tylko jest pewien myk dość istotny. Position fixed podobno nie działa na mniejszych urządzeniach. Szczerze mówiąc nie wiem czy to prawda bo żadnego z nich nie posiadam - na telefonie nie mam neta - więc zwykle robię stronę na mniejsze urządzenia trochę po omacku.

W sumie najważniejsze, że ostateczny efekt zawsze działa.

Dzięki za odpowiedź. Za każdą jestem "dźwięczny" bo daje nową wiedzę, a tej nigdy za wiele

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.