[css] [JavaScript] Element przyklejający się do ekranu po skrolowaniu., Skrypt nie do końca dobrze działa. Opcje

[luis2luis]

Witam.

Przygotowałem skrypt, który przykleja element do okna przeglądarki (position:fixed) gdy górna kraweź przeglądarka zjeżdżając w dół, scrolując osiągnie już ten element

Już mniej więcej działa, jak osiągne górną granice tego elementu, to zmienia sie pozycja.

[PHP] pobierz, plaintext 
 
<script>
$(document).ready(function() { 
 
	$(document).on('scroll', function() {
 
		var header_height = $("#top-fixed-menu").outerHeight();
		var offset = $("#top-fixed-menu").offset();//offset czyli pozycja wzgleden góry strony.
 
		var offset_top = offset.top;
 
		if ($(window).width() > 960) {//tylko dla szerokich monitorów
			if ($(window).scrollTop() >= offset_top) {
 
				$("#top-fixed-menu").addClass("fly_lista");
			} else {
 
				$("#top-fixed-menu").removeClass("fly_lista");
			}
		}
	});
});
</script>
 
<style>
#top-fixed-menu  { position: relative; background: #262f36; float: right; width: 380px; min-height: 100px; color: #fff; }
.fly_lista { position: fixed !important; top: 0px !important; right: 0px !important; } 
</style>
 
[PHP] pobierz, plaintext 

Prosze o pokierowanie. Widzę, że w momencie gdy element dostaje position fixed, parametr top jest dosyc łatwy do określenia ale co z pozycją right? :/
Dodatkowo jak wracam spowrotem na góre to element dalej ma pozycje fixed. Coś nie tak jest z kodem javascript.

[trueblue]

Skoro element po dodaniu klasy .fly_lista ma pozycję fixed, to jaki jest sens pobierania wtedy jego pozycji (offset)?

A co do położenia od prawej, to trudno Ci odpowiedzieć, bo nie wiadomo jaka jest jego pozycja kiedy nie jest zafiksowany. Chyba, że przed przyklejeniem również jest umiejscowiony przy prawej krawędzi. Wtedy nic nie trzeba zmieniać.

[luis2luis]

Skoro element po dodaniu klasy .fly_lista ma pozycję fixed, to jaki jest sens pobierania wtedy jego pozycji (offset)?

A co do położenia od prawej, to trudno Ci odpowiedzieć, bo nie wiadomo jaka jest jego pozycja kiedy nie jest zafiksowany. Chyba, że przed przyklejeniem również jest umiejscowiony przy prawej krawędzi. Wtedy nic nie trzeba zmieniać.

Ofset pobieram tylko po to, żeby wiedzieć kiedy okno przeglądarki "osiągneło" już ten element.

Późnije ju żgo nie potrzebuje, chodzi tetraz o to, że element pozycjonowany jako fixed uciekami na praą częśc okna przeglądarki. Przed fixowaniem jest w prawej części kontenera strony, który ma 1300 pixeli. Jego style są tutaj: pod znacznikiem: #top-fixed-menu

Ten post edytował luis2luis 24.08.2017, 14:30:16

[trueblue]

Nie potrzebujesz, ale wykorzystujesz. Przecież na tym jest oparty warunek.
Jeśli rozwiążesz ten problem, to będziesz wiedział co począć z właściwością right.

[luis2luis]

Nie potrzebujesz, ale wykorzystujesz. Przecież na tym jest oparty warunek.
Jeśli rozwiążesz ten problem, to będziesz wiedział co począć z właściwością right.

dzieki za odpowiedzi.

Jeśli mnie oczy nie mylą, parametr ofset decyduje o tym kiedy dodac klase ".fly_lista". Klasa doaje siępoprawnie, ale jak wyjde wyżej to już nie jest kasowanato jest jedne z tych problemów.

--- aha wiem-

powineniem wartość offset.top zapisac sobie poza tym zdażeniem jako zmienną przekazać do skryptu, ponieważ później jak już element jest zafixowany to wtedy fixowany element już offset.top nie złapie.

pozostaje problem z pozycją od prawego boku ekranuj..

Ten post edytował luis2luis 24.08.2017, 15:04:21

[trueblue]

A kiedy usunąć klasę, to już nie decyduje?
Przecież cały czas wykorzystujesz go i opierasz na nim warunek.

[luis2luis]

Rozwiązałem już jedną sprawe tego, że klasa fly sie nie wyłącza.

Czy do wyznaczenia parametru css('right', ? ); potrzebuje ten mechanizm offset ?

[PHP] pobierz, plaintext 
 
var offset = $("#top-fixed-menu").offset();//offset czyli pozycja wzgleden góry strony.
var sum_height = offset.top; //header_height+offset.top; //topmenu_height + header_height + menu_height;
 
$(document).on('scroll', function() {
 
	var header_height = $("#top-fixed-menu").outerHeight();
 
	if ($(window).width() > 960) {
		if ($(window).scrollTop() >= offset.top) {
			$(".#top-fixed-menu").addClass("fly_lista");
 
		} else {
			$(".#top-fixed-menu").removeClass("fly_lista");
		}
	}
 
});
 
[PHP] pobierz, plaintext 

Ten post edytował luis2luis 24.08.2017, 15:21:49

[trueblue]

A jakie parametry zwraca funkcja offset?

[luis2luis]

A jakie parametry zwraca funkcja offset?

Działa. Kurde nie wpadłbym, że funkcja ofset zwraca tylko left i top.

Dziękuje dobry człowieku za pomoc

[trueblue]

Co się sprowadza do tego, że right=left+szerokość_elementu.
Ale możesz też używać tylko left.

[luis2luis]

Co się sprowadza do tego, że right=left+szerokość_elementu.
Ale możesz też używać tylko left.

ok dziekuje, samo left wystarcza w zupełności

[ReCreator]

Rozwiązałem już jedną sprawe tego, że klasa fly sie nie wyłącza.

Mógł bym prosić kod z poprawnie działającyą funkcją usuwania klasy podczas powrotu?

Ten post edytował ReCreator 11.12.2017, 19:28:53