Skocz do zawartości

[CSS] pomoc przy position: fixed, position: absolute


Szogun

Rekomendowane odpowiedzi

Witam. Chciałem unieruchomić warstwę od pewnego momentu i to mi się udało, jednak problem pojawia się po zjechaniu na sam dół strony, mianowicie warstwa ta nachodzi na stopkę i nie wygląda to estetycznie. I teraz pytanie do Was, co zrobić aby zatrzymywała się ona np. o określoną ilość px od dołu strony (tzn. dochodzi do stopki i się zatrzymuje)?

Screen jak to wygląda teraz (widać że po przewinięciu strony na sam dół reklama nachodzi na stopkę:

https://iv.pl/images/13972520413645621507.jpg

Poniżej fragmenty kodu css i html

   #commentWrapper {
  position: absolute;
  width: 200px;
}
#comment {
  position: absolute;
  margin-top: 10px;
  margin-bottom: 200px;
  text-align: center;
  border-top: 1px solid #8a8b56;
  border-bottom: 1px solid #8a8b56;
  padding-top: 19px;
  padding-bottom: 19px;
  width: 200px;
  background:url(../xxx.gif) repeat-y 0 0 #B3B477;
}
#comment.fixed {
  position: fixed;
  top: 0;
}

	....
<head>
...
<script src="jquery.js"></script>			
<script>
$(function () {
  var msie6 = $.browser == 'msie' && $.browser.version < 7;
  if (!msie6) {
	var top = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
	$(window).scroll(function (event) {
	  // what the y position of the scroll is
	  var y = $(this).scrollTop();  
	  // whether that's below the form
	  if (y >= top) {
		// if so, ad the fixed class
		$('#comment').addClass('fixed');
	  } else {
		// otherwise remove it
		$('#comment').removeClass('fixed');
	  }
	});
  }
});
</script>
</head>

...

   <div id="commentWrapper">
	  <div id="comment">
		 <zawartość warstwy>
	  </div>
	</div>

...

Mam nadzieję że wszystko w miarę jasno wytłumaczyłem :D

Proszę o pomoc.

Najlepsze tapety w sieci.

Odnośnik do komentarza
Udostępnij na innych stronach

  • 2 tygodnie później...

Padding-bottom? najprawdopodobniej o ile dobrze rozumiem. Jeśli nie to daj bezpośredni link żebym mógł zobaczyć jak to idzie.

EDIT:

Żeby nie było "margin-bottom" również może to naprawić. Nad stopką.

penguins.jpg

Odwiedzaj regularnie mój blog o seo na lukaszt.pl podobno warto ;)

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności