Jak przykleić element do ekranu podczas przewijania?

Wątek przeniesiony 2024-11-10 12:06 z JavaScript przez Riddle.

1

Witam wszystkich!

Mam plik .html, w którym w body jest <header>, <main> i <footer>
I mam problem z {position:fixed} w #tools-container.
Problem polega na tym, że ja chcę, jeżeli strona jest duża, to img (przycisk) miał position:fixed, ale jeżeli doscrolluje do dołu (gdzie jest <footer>) to, żeby ten obrazek miał wartości bottom: 20px; right: 20px; względem <main>, czyli żeby nie był fixed na stopce.

Oto kod kontejnera #tools-container (On jest w <main>)

<header>
(...)
</header>
<main>
(...)
<div id="tools-container">
			<ul id="tools_list">
				<li><a href="index.php">Dodawanie</a></li>
				<li id="tools_active"><a href="loan-table.html">Wypożyczenia</a></li>
				<li><a href="#">Czytelnicy</a></li>
				<li><a href="#">Książki</a></li>
			</ul>
            <img src="img/menu.png" id="tools_img" alt="Menu" width="75%">
		</div>
</main>
<footer>
(...)
</footer>
#tools-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100; /* Wysoki z-index, aby element był na wierzchu */
}
	
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
...
let tools_img = document.getElementById('tools_img');
let tools_elements = document.getElementById('tools_list');
let isClickedTools = false;

tools_img.onclick = () => {
	isClickedTools = !isClickedTools;
	tools_elements.style.display = isClickedTools ? "block" : "none";
};

Z góry dziękuję!

1

Według mnie najlepiej byłoby wyodrębnić tools_img z tools_container, ponieważ po jego ukazaniu się pozycja tools_img zmienia się na ekranie. I wyświetlać oba te elementy warstwami, ikonka na wierzchu.
Ogólnie idea jest widoczna na tym przykładzie.

0

@gg ggg: Dobrze rozumiem, że próbujesz zrobić element "sticky"? Tzn. taki który kiedy jest w viewporcie to widać go normalnie, ale kiedy wejdzie z viewportu (np. za bardzo na dół), to wtedy widać jakby był przyklejony?

0

tak, dziękuję

0

dodaj eventListener do onScroll


if(polozenie>window.innerHeight){   #tools-container.style.position = "absolute";
                          }else{
                                   #tools-container.style.position = "fixed";}

albo <window.innerHeight

coś w tym stylu

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.