Skip to content

Commit

Permalink
Enhance Scroll Interaction with Threshold-Based Visibility for Naviga…
Browse files Browse the repository at this point in the history
…tion Elements (#1841)
  • Loading branch information
paulo-valim committed Jan 10, 2024
1 parent aa1866c commit 440b1cf
Show file tree
Hide file tree
Showing 8 changed files with 85 additions and 36 deletions.
23 changes: 22 additions & 1 deletion assets/css/layout.css
Expand Up @@ -123,6 +123,18 @@ body.sidebar-closed .sidebar-button {
}

@media screen and (max-width: 768px) {
.sidebar-button {
top: 0;
transition: top .3s;
position: absolute;
}

.sidebar-button.fixed {
top: 0;
transition: top .3s;
position: fixed;
}

.content,
body.sidebar-opening .content {
left: 0;
Expand All @@ -137,8 +149,17 @@ body.sidebar-closed .sidebar-button {
}

body.sidebar-closed .sidebar-button {
position: fixed;
left: 0;
top: 0;
transition: top .3s;
position: absolute;
}

body.sidebar-closed .sidebar-button.fixed {
position: fixed;
left: 0;
transition: top 0.9s;
top: 0;
transition: top .3s;
}
}
39 changes: 24 additions & 15 deletions assets/css/search-bar.css
@@ -1,13 +1,3 @@
.background-layer {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background-color: var(--background);
}

.top-search {
margin-top: 10px;
}
Expand Down Expand Up @@ -130,13 +120,17 @@
}

@media (max-width: 768px) {
.background-layer {
display: block;
z-index: 10;
transition: top 0.3s;

.top-search {
margin-top: 0;
position: absolute;
top: 13px;
left: 56px;
right: 20px;
z-index: 99;
}

.top-search {
.top-search.fixed {
margin-top: 0;
position: fixed;
top: 13px;
Expand All @@ -146,6 +140,21 @@
z-index: 99;
}

.background-layer {
display: block;
z-index: 10;
transition: top 0.3s;
}

.background-layer.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background-color: var(--background);
}

.search-settings {
width: 100%;
box-sizing: border-box;
Expand Down
31 changes: 25 additions & 6 deletions assets/js/search-bar.js
Expand Up @@ -142,27 +142,46 @@ function isMacOS () {
return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
}

window.addEventListener('scroll', function () {
const topSearch = document.querySelector('.top-search')
const sidebarMenu = document.getElementById('sidebar-menu')
const backgroundLayer = document.querySelector('.background-layer')
const currentScroll = window.scrollY

// Add 'fixed' class when not at the top
if (currentScroll > 70) {
topSearch.classList.add('fixed')
sidebarMenu.classList.add('fixed')
backgroundLayer.classList.add('fixed')
} else {
// Remove 'fixed' class when at the top
topSearch.classList.remove('fixed')
sidebarMenu.classList.remove('fixed')
backgroundLayer.classList.remove('fixed')
}
})

let lastScrollTop = window.scrollY
const topSearch = document.querySelector('.top-search')
const sidebarMenu = document.getElementById('sidebar-menu')
const backgroundLayer = document.querySelector('.background-layer')
const scrollThreshold = 56 // Set a threshold for scroll, adjust as needed

window.addEventListener('scroll', function () {
const currentScroll = window.scrollY

if (currentScroll > lastScrollTop) {
// Scrolling down
if (currentScroll > lastScrollTop && currentScroll > scrollThreshold) {
// Scrolling down and past the threshold
topSearch.style.top = '-50px'
backgroundLayer.style.top = '-70px'
// Only hide sidebarMenu if aria-expanded is not true
if (sidebarMenu.getAttribute('aria-expanded') !== 'true') {
sidebarMenu.style.display = 'none'
sidebarMenu.style.top = '-50px'
}
} else {
// Scrolling up
// Scrolling up or at the top of the page
topSearch.style.top = '11px'
backgroundLayer.style.top = '0px'
sidebarMenu.style.display = 'block'
sidebarMenu.style.top = '0px'
}

lastScrollTop = currentScroll <= 0 ? 0 : currentScroll
Expand Down

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions formatters/html/dist/html-elixir-KPL2KMOQ.css

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions formatters/html/dist/html-elixir-OX6HFLA4.css

This file was deleted.

6 changes: 6 additions & 0 deletions formatters/html/dist/html-erlang-D7OKCZI3.css

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions formatters/html/dist/html-erlang-XUY32CF7.css

This file was deleted.

0 comments on commit 440b1cf

Please sign in to comment.