Problemy ze skryptem wykrywającym szerokośc okna przeglądarki

0

Witam wszystkich,

To pytanie moze się wydać trywialne, jednak nienazwałbym się mistrzem JavaScriptu, ani nawet kimś kto z tym językiem po prostu żyje za pan brat.

Problem polega na tym, iż napisałem dość prosty skrypt który uruchamia funkcję umożliwiającą pojawianie/chowanie się scrollup buttonu (.scrollup) wtedy gdy ekran przeglądarki jest szerszy niż 767px wygląda to tak:

$(document).ready(function() {
				   $(window).resize();
						});

$(window).resize(function() {
						if ($(this).width() > 1000) {	
			$(window).scroll(function()
		{
			if($(this).scrollTop()>100) $('.scrollup').fadeIn();
			else $('.scrollup').fadeOut();
		}
		
		
				)}});

I faktycznie po włączeniu przeglądarki skrypt działa, jeżeli jednak zmaksymalizuje okno przeglądarki (tym samym uruchamiając obecność .scrollupa) a następnie ponownie zmniejsze scrollup nie znika. Czy ktoś może mi coś zasugerować :)?

1

Spróbuj przebudować kod - w window.resize wywołujesz ifa, który najpierw sprawdza długość okna a potem całą akcję chowania i pokazywania przekazujesz funkcji window.scroll, która to odpala się według mej wiedzy dopiero jak przescrollujesz stronę i dopiero wtedy kod powinien się wykonać.
Poza tym scrollTop to jest odegłość od początku dokumentu a nie szerokość okna przeglądarki - od tego jest window.width().

To co chcesz osiągnąć to powinno wyglądać chyba mniej więcej tak

$(function()
{
	$(window).on('load resize',function() // event load oraz resize
	{
		if($(window).width()>100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } // wykonanie zmian w okreslonym przypadku dlugosci okna
	});
});

Chyba, że w poście, źle się wyraziłeś i chcesz uzależnić akcję od aktualnego przesunięcia strony, to wtedy musisz rzeczywiście użyć funkcji window.on('scroll') ale nie w takim wywołaniu jak napisałeś, lecz raczej coś takiego

$(function()
{
	$(window).on('load scroll',function() // event load oraz resize
	{
		currentScroll=$(window).scrollTop(); // pobieranie aktualnej pozycji strony od gory
		if(currentScroll>100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } // wykonanie zmian w okreslonym przypadku dlugosci okna
	});
});
0

Chodzi o to żeby działały dwie funkcje - jedna włącza .scrollup w zależności od przesunięcia scrolla na stronie, a druga funkcja włącza te pierwszą w zależności od szerokości okna. Tak żeby scrollup nie pojawiał się wcale jeżeli szerokość okna jest małą, a jeżeli jest wystarczająco duża, żeby pojawiał się przy zeskrolowaniu w dół.

1

Spróbuj tak:

$(function()
{
	$(window).on('load resize scroll',function() // wywolaj przy zaladowaniu, resize i scrollowaniu
	{
		scrollUpToggle(); // wykonaj nasza funkcje
	});
	
	
});

function scrollUpToggle()
{
	currentScroll=$(window).scrollTop();
	if($(window).width()>100) // jezeli dlugosc ok - sprawdz gorny scroll
	{ 
		if(currentScroll>200) // jezeli wielkosc scrolla ok - pokaz scrollup
		{ // pokaz scrollup } 
		else // jezeli nie to go ukryj
		{ // ukryj scrollup }
	} 
	else // jezeli dlugosc za mala ukryj
	{ // ukryj scrollup }
}

Nie testowałem kodu więc ewentualnie popraw błędy i dopasuj do swoich wymagań :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1