Usztywnienie menu, Płynny układ strony, pobranie pozycji elementu pozycjonowanie fixed Opcje

[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 
$(document).ready(function(){
  if ($('#sideBox')){
    var startPos = $('#sideBox').offset().top;
    $(window).scroll(function(e){
      if ($(window).scrollTop() > startPos){
        $('#sideBox').css({
          position:'fixed',
          top: 10,
          width: $('#sideBox').width()
        })
      }else{
        $('#sideBox').css({
          position:'relative'
        })
      }
    })
  }
})
[JAVASCRIPT] pobierz, plaintext 

[Asmox]

Hmm... dzięki za rozwiązanko ale mam problem żeby zrozumieć o co chodzi 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?

[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

[Asmox]

Tutaj tak mam zrobione: http://www.margoextend.net/plugins/top

[JAVASCRIPT] pobierz, plaintext 
...
position:'fixed',
top: 10,
width: $('#sideBox').width()
...
[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 
var panel = document.getElementById('rpanel');
			panel.style.position = 'fixed';
			panel.style.top = '200px';
			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ć ^^

Ten post edytował Asmox 19.04.2011, 18:42:55

[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 
      if ($(window).scrollTop() > startPos){ // jeśli pozycja scrola jest większa niż aktualna pozycja elementu
        $('#sideBox').css({
          position:'fixed', // to ustawiam mu fixed 
          top: 10, // i jest wtedy zawsze 10px od górnej ramki okna
          width: $('#sideBox').width()
        })
      }else{ // jeśli nie, to ustawiam relative i div wraca do swojej wcześniejszej pozycji wewnątrz rodzica w którym jest osadzony
        $('#sideBox').css({
          position:'relative'
        })
      }
[JAVASCRIPT] pobierz, plaintext 

zamiast relative, może tam być static, ale mi było potrzebne relative, teraz już nie pamiętam czemu

[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:

[HTML] pobierz, plaintext 
<div id="content"><?php $this->printField('glowny_kontener'); ?></div> <!--główny kontener to pierwszy div z display:table-cell-->
				<div id="rpanel"><div id="js_rpanel"> <!-- rpanel to drugi z display:table-cell, natomiast do js_panel stosowana jest funkcja -->
					<div class="caption">Menu</div>
					<?php
						// Wypisanie zawartości menu
						$this->printField('menu');
 
					// Sprawdzanie, czy są tagi i ich wypisanie
					if ($this->checkField('tagi')) {
						echo '<div class="caption"><span>Tagi</span></div>';
						$this->printField('tagi');
					}
					?>
				</div>
			</div></div>
[HTML] pobierz, plaintext 

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 Pomożesz?

Ten post edytował Asmox 16.02.2012, 21:51:35