Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Scroll i znikający nagłówek. Co zrobić by header był zawsze widoczny?, Nagłówek zawsze na wierzchu
Bart123
post 10.09.2014, 20:35:24
Post #1





Grupa: Zarejestrowani
Postów: 105
Pomógł: 0
Dołączył: 10.05.2014
Skąd: Elbląg

Ostrzeżenie: (10%)
X----


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.

Ten post edytował Bart123 10.09.2014, 20:48:39
Go to the top of the page
+Quote Post
rad11
post 10.09.2014, 20:49:55
Post #2





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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

Ten post edytował rad11 10.09.2014, 20:59:54
Go to the top of the page
+Quote Post
Bart123
post 10.09.2014, 21:02:13
Post #3





Grupa: Zarejestrowani
Postów: 105
Pomógł: 0
Dołączył: 10.05.2014
Skąd: Elbląg

Ostrzeżenie: (10%)
X----


Dzięki za podpowiedź wink.gif Skoro się nie da w css - będziemy się bawić w JS. Life is brutal wink.gif

Trzeba będzie się po prostu nauczyć.

Ten post edytował Bart123 10.09.2014, 21:02:47
Go to the top of the page
+Quote Post
php__amator
post 11.09.2014, 21:06:04
Post #4





Grupa: Zarejestrowani
Postów: 217
Pomógł: 1
Dołączył: 26.05.2011
Skąd: Moon

Ostrzeżenie: (10%)
X----


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 smile.gif 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 smile.gif

  1. <style type="text/css">
  2. body {
  3. margin-left: 10px;
  4. margin-top: 290px;
  5. color: rgba(000,255,255,0.8);
  6. text-shadow: rgba(000,000,000,0.4);
  7. scrollbar-face-color: #036;
  8. background-image: url(../images/back.png);
  9. font-family: Arial;
  10. text-align: left;
  11. }
  12. #fixed {
  13. position:fixed;
  14. top: 10px;
  15. left: 10px;
  16. z-index: 100;
  17. }
  18. <div id="fixed">Nagłówek</div>
  19.  
  20. </body>

Go to the top of the page
+Quote Post
Bart123
post 18.09.2014, 17:42:48
Post #5





Grupa: Zarejestrowani
Postów: 105
Pomógł: 0
Dołączył: 10.05.2014
Skąd: Elbląg

Ostrzeżenie: (10%)
X----


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 wink.gif

Ten post edytował Bart123 18.09.2014, 17:44:56
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 17.05.2025 - 08:39