Na stronie lesnedukty.pl mam skrypt, który blokuje menu nawigacyjne z lewej strony oraz logotypy z prawej strony przy górnej krawędzi okna podczas przewijania. Ogólnie wszystko działa, ale chciałem to działanie troszeczkę ulepszyć. Gdy wysokość okna przeglądarki jest większa niż wysokość blokowanego elementu. Jest wszystko OK. Podczas przewijania w górę, gdy element zostanie przewinięty do górnej krawędzi okna, pozycja jego zostaje zablokowana. Przy przewijaniu w dół, gdy element znajdujący się nad blokowanym zbliży się od góry do krawędzi okna, to wtedy zablokowany element przesuwa się z całą stroną w dół.
Gdy wysokość okna jest mniejsza niż wysokość blokowanego elementu, przy przewijaniu do góry, element przesuwa się ponad górną krawędź okna, aby można było zobaczyć jego całą dolną zawartość i dopiero wtedy jego pozycja zostaje zablokowana. Przy przewijaniu w dół, zwłaszcza gdy cała strona z dużą zawartością została przewinięta do góry, zablokowany element zacznie się przesuwać w dół dopiero od momentu, kiedy strona się przewinie do miejsca, w którym został on zablokowany. W sumie to nie przeszkadza, ale można lepiej. Chciałbym, żeby podczas przewijania w dół, element od razu się przesunął, żeby było widać jego całą górną zawartość, następnie zablokował do momentu, kiedy dół elementu nad nim się do niego zbliży, a następnie przesunął w dół z całą stroną.
  1. <scrypt>
  2. function slide_side_content()
  3. {
  4. var scroll_gap_left;
  5. if ($(window).height() < $("#left_content").outerHeight( true ))
  6. {
  7. scroll_gap_left = $("#left_content").outerHeight( true ) - $(window).height()
  8. }
  9. else
  10. {
  11. scroll_gap_left = 0
  12. }
  13. if (document.body.scrollTop > 200 + scroll_gap_left || document.documentElement.scrollTop > 200 + scroll_gap_left)
  14. {
  15. document.getElementById("left_content").style.position = "fixed";
  16. document.getElementById("left_content").style.top = "-" + scroll_gap_left + "px";
  17. }
  18. else
  19. {
  20. document.getElementById("left_content").style.position = "static";
  21. }
  22.  
  23. var scroll_gap_right;
  24. if ($(window).height() < $("#right_content").outerHeight( true ))
  25. {
  26. scroll_gap_right = $("#right_content").outerHeight( true ) - $(window).height()
  27. }
  28. else
  29. {
  30. scroll_gap_right = 0
  31. }
  32. if (document.body.scrollTop > 200 + scroll_gap_right || document.documentElement.scrollTop > 200 + scroll_gap_right)
  33. {
  34. document.getElementById("right_content").style.position = "fixed";
  35. document.getElementById("right_content").style.top = "-" + scroll_gap_right + "px";
  36. }
  37. else
  38. {
  39. document.getElementById("right_content").style.position = "static";
  40. }
  41. }
  42. </scrypt>