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

[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

[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