Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Usztywnienie menu
Forum PHP.pl > Forum > Po stronie przeglądarki
Asmox
Zrobiłem sobie płynny, dwukolumnowy układ strony z menu po prawej. Nie jest ono bardzo obudowane, wygląda jak takie zawieszone panele. Pomyślałem, że dobrze by było, jakby nie znikało przy przewijaniu strony, bo puste miejsce o szerokości 200 px kiepsko wygląda, a poza tym nakazuje użytkownikom cofać stronę do początku jak chce ujrzeć to menu.
Wszystko byłoby proste, gdyby nie to, że właśnie układ jest płynny i jeszcze panele są po prawej stronie. Ale mam pewien pomysł, tylko nie wiem jak go zrealizować. Mianowicie chciałbym odczytać bezwzględną pozycję elementu (na początku ma się ustawiać normalnie, bo CSS się tym zajmuje żeby wszystko było na swoim miejscu). Po odczytaniu położenia względem okna przeglądarki chciałbym ustawić stałe pozycjonowanie. Wtedy, podczas przewijania strony menu zostawałoby na swoim miejscu.
Niestety nie wiem jak się za to zabrać, czy mógłbym prosić o pomoc?
krowal
Tutaj tak mam zrobione: http://www.margoextend.net/plugins/top
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function(){
  2. if ($('#sideBox')){
  3. var startPos = $('#sideBox').offset().top;
  4. $(window).scroll(function(e){
  5. if ($(window).scrollTop() > startPos){
  6. $('#sideBox').css({
  7. position:'fixed',
  8. top: 10,
  9. width: $('#sideBox').width()
  10. })
  11. }else{
  12. $('#sideBox').css({
  13. position:'relative'
  14. })
  15. }
  16. })
  17. }
  18. })
[JAVASCRIPT] pobierz, plaintext

Asmox
Hmm... dzięki za rozwiązanko ale mam problem żeby zrozumieć o co chodzi smile.gif Nie jestem za dobry z JS, póki co znam tylko getElementByID. No i zdziwiło mnie, że używasz tylko top. Jak to robisz, że nie musisz podawać własności right? No i jak odczytujesz te własności? A najbardziej mnie zastanawia, co dają te dolary? biggrin.gif
krowal
Te dolary to z http://jquery.com/ , taki framework JS, upraszcza sporo rzeczy i jest bardzo popularny. Right nie jest potrzebny bo pozycja początkowa jest zależna od pozycji rodzica przesuwanego elementu. Niestety bez podstawowej znajomości JS tego nie ugryziesz wink.gif
Asmox
Cytat(krowal @ 19.04.2011, 07:26:13 ) *
Tutaj tak mam zrobione: http://www.margoextend.net/plugins/top
[JAVASCRIPT] pobierz, plaintext
  1. ...
  2. position:'fixed',
  3. top: 10,
  4. width: $('#sideBox').width()
  5. ...
[JAVASCRIPT] pobierz, plaintext

Chodzi mi o to, że ustawiłeś tylko pozycjonowanie, odstęp od góry i szerokość diva. Gdy ja tak robię poprzez zwykły java script:
[JAVASCRIPT] pobierz, plaintext
  1. var panel = document.getElementById('rpanel');
  2. panel.style.position = 'fixed';
  3. panel.style.top = '200px';
  4. panel.style.width = panel.offsetWidth;
[JAVASCRIPT] pobierz, plaintext

To mi wywala kompletnie ten kontener z układu i pokazuje się na górze po lewej (oczywiście jest odstęp od góry), aczkolwiek nie przy samym lewym brzegu, tylko tam gdzie jest blok main_wrapper, który po prostu określa maksymalną szerokość strony. W sumie zdziwiło mnie to, bo jak pozycjonowanie względem przeglądarki, to chyba powinno dotykać lewego brzegu, bo go nie ustawiałem.
Btw może i mało wiem z JavaScriptu, ale jakoś szukam tego co potrzebuję. A to pozycjonowanie nie wydaje mi się jakoś szczególnie trudne, tylko na razie nie wiem jak to zrobić ^^
krowal
Bo nie bierzesz w ogóle pod uwagę położenia scrolla, u mnie position fixed ustawia się tylko gdy pozycja scrolla przekracza pewną wartość, spójrz na to:
[JAVASCRIPT] pobierz, plaintext
  1. if ($(window).scrollTop() > startPos){ // jeśli pozycja scrola jest większa niż aktualna pozycja elementu
  2. $('#sideBox').css({
  3. position:'fixed', // to ustawiam mu fixed
  4. top: 10, // i jest wtedy zawsze 10px od górnej ramki okna
  5. width: $('#sideBox').width()
  6. })
  7. }else{ // jeśli nie, to ustawiam relative i div wraca do swojej wcześniejszej pozycji wewnątrz rodzica w którym jest osadzony
  8. $('#sideBox').css({
  9. position:'relative'
  10. })
  11. }
[JAVASCRIPT] pobierz, plaintext

zamiast relative, może tam być static, ale mi było potrzebne relative, teraz już nie pamiętam czemu wink.gif
Asmox
Hejka, wiem że stary temat, ale próbuję zrobić to sztywne menu i mam problem - otóż mój układ składa się z dwóch elementów ustawionych jako table-cell i gdy dawałem temu od menu position: 'fixed', to w ogóle gdzieś znikał. Dlatego zastosowałem wewnątrz niego dodatkowy div, do którego są stosowane instrukcje java script:
Kod
function posMenu() {
                var menu = document.getElementById('js_rpanel');
                var menuVertPos = menu.offsetTop;
                if (document.body.scrollTop > menuVertPos) {
                    menu.style.position = 'fixed';
                    menu.style.top = '-1000'; // czegokolwiek bym nie wpisał i tak nic się nie dzieje :-(
                    menu.style.left = '500';
                }
                else {
                    menu.style.position = 'relative';
                }
            }

Fragment szablonu wygląda natomiast tak:
  1. <div id="content"><?php $this->printField('glowny_kontener'); ?></div> <!--główny kontener to pierwszy div z display:table-cell-->
  2. <div id="rpanel"><div id="js_rpanel"> <!-- rpanel to drugi z display:table-cell, natomiast do js_panel stosowana jest funkcja -->
  3. <div class="caption">Menu</div>
  4. <?php
  5. // Wypisanie zawartości menu
  6. $this->printField('menu');
  7.  
  8. // Sprawdzanie, czy są tagi i ich wypisanie
  9. if ($this->checkField('tagi')) {
  10. echo '<div class="caption"><span>Tagi</span></div>';
  11. $this->printField('tagi');
  12. }
  13. ?>
  14. </div>
  15. </div></div>

A oto css zastosowany do powyższych elementów
Kod
div#board div#content {
    background-color: #101010;
    border: 6px solid #aaeeff;
    color: #f9f9f9;
    padding: .5em 1em;
    -khtml-border-radius:20px;
    -moz-border-radius:20px;
    -icab-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
}

div#board div#rpanel {
    padding-left: 10px;
    width: 200px;
    vertical-align: top;
}


No i na dodatek działa w ogóle tylko w Chromie sad.gif Pomożesz?
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.