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ę!