ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 13:55:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Navbar changes on scroll

Browse source
This commit is contained in:
Thomas Smith 2022-05-03 16:51:58 -04:00 committed by mxcl
parent a895e02896
commit ab2262d6bc
Failed to extract signature
2 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/index.html
View file

@ -35,13 +35,13 @@
<body> <body>
<nav class="navbar navbar-expand-lg navbar-dark sticky-top my-auto" > <nav class="navbar bg-dark navbar-expand-lg navbar-dark sticky-top my-auto" >
<div class="container-fluid top-nav"> <div class="container-fluid top-nav">
<a class="navbar-brand" href="#"><img src="Images/tea-main-logo.svg" style="width:100px;"></a> <a class="navbar-brand" href="#"><img src="Images/tea-main-logo.svg" style="width:100px;"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse pt-4 pb-4" id="navbarSupportedContent"> <div class="collapse navbar-collapse pt-2 pb-2" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-4 my-auto"> <ul class="navbar-nav ms-auto me-4 my-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link active" aria-current="page" href="#">Home</a>
@ -391,5 +391,13 @@ authenticate your Github with tea. </p>
} }
</script> </script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > 100);
});
</script>
</body> </body>
</html> </html>

8
public/style.css
View file

@ -13,6 +13,14 @@ body{
background-color: black; background-color: black;
} }
.bg-dark {
background:transparent !important;
transition:0.2s ease-in-out;
}
.bg-dark.scrolled {
background-color:#000 !important;
}
#tea-steam-dark-1{ #tea-steam-dark-1{
z-index:0; z-index:0;
position: absolute; position: absolute;