From 623931386074d57f98d190a8b5100bdd885dd123 Mon Sep 17 00:00:00 2001 From: "amr-bash@users.noreply.github.com" <106351212+amr-bash@users.noreply.github.com> Date: Thu, 7 Mar 2024 00:39:52 +0000 Subject: [PATCH] fixed back to top button --- _includes/sidebar-right.html | 4 +- _sass/it-journey/custom.scss | 43 +++- _sass/it-journey/it-journey.scss | 5 - assets/js/back-to-top.js | 35 +--- .../_notes/add-floating-back-to-top-button.md | 49 +++-- pages/_posts/2024-03-06-auto-hide-nav-bar.md | 186 ++++++++++++++++++ 6 files changed, 273 insertions(+), 49 deletions(-) create mode 100644 pages/_posts/2024-03-06-auto-hide-nav-bar.md diff --git a/_includes/sidebar-right.html b/_includes/sidebar-right.html index 6c9d5c0..421dcba 100644 --- a/_includes/sidebar-right.html +++ b/_includes/sidebar-right.html @@ -30,7 +30,9 @@ - diff --git a/_sass/it-journey/custom.scss b/_sass/it-journey/custom.scss index dfb9710..76b486c 100644 --- a/_sass/it-journey/custom.scss +++ b/_sass/it-journey/custom.scss @@ -1,3 +1,12 @@ +html, body { + max-width: 100%; + overflow-x: hidden; + } + + * { + box-sizing: border-box; + } + .make-me-sticky { position: -webkit-sticky; position: sticky; @@ -39,14 +48,44 @@ border-radius:10px;/* Rounded corners */ font-size:18px;/* Increase font size */ } - + +#backToTopBtn { + .text { + display: inline-block; + } + + .arrow { + display: none; + } + + @media (max-width: 600px) { + .text { + display: none; + } + + .arrow { + display: inline-block; + } + } +} + #backToTopBtn:hover { background-color: #555; /* Add a dark-grey background on hover */ opacity: 100%; } -.img { +img { display: inline-block; + max-width: 100%; + height: auto; +} + +#navbar { + transition: transform 0.3s; +} + +.hide-navbar { + transform: translateY(-100%); } // #box { diff --git a/_sass/it-journey/it-journey.scss b/_sass/it-journey/it-journey.scss index 5323856..b4931a8 100644 --- a/_sass/it-journey/it-journey.scss +++ b/_sass/it-journey/it-journey.scss @@ -15,9 +15,4 @@ // @extend .blockquote-footer; // } -// Extends the CSS for .img-fluid to tags inside a

tag -// p, img -// { -// @extend .img-fluid; -// } diff --git a/assets/js/back-to-top.js b/assets/js/back-to-top.js index c9e8b55..e5fbded 100644 --- a/assets/js/back-to-top.js +++ b/assets/js/back-to-top.js @@ -1,38 +1,19 @@ -//Event listener to see if scrolling has started - -window.addEventListener('scroll', function() { - var element = document.getElementById('backToTopBtn'); - var height = window.innerHeight; - var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; +document.addEventListener('DOMContentLoaded', (event) => { + let mybutton = document.getElementById("backToTopBtn"); - if (scrollTop > height * 0.1) { // Adjust the 0.1 to control when the opacity starts changing - element.style.opacity = 0.2; // 20% opacity - element.style.display = "block" - } else { - element.style.opacity = 0; // 0% opacity - element.style.display = "none" + function topFunction() { + document.body.scrollTop = 0; // For Safari + document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera + mybutton.style.opacity = "75%"; } -}); - -function backToTopBtn() { - - - let mybutton = document.getElementById("backToTopBtn"); - if (mybutton) { - function topFunction() { - document.body.scrollTop = 0; // For Safari - document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera - mybutton.style.opacity = "75%"; - } - mybutton.onclick = topFunction; } // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; - + function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; @@ -40,4 +21,4 @@ function backToTopBtn() { mybutton.style.display = "none"; } } -} \ No newline at end of file +}); diff --git a/pages/_notes/add-floating-back-to-top-button.md b/pages/_notes/add-floating-back-to-top-button.md index b2aec18..b119877 100644 --- a/pages/_notes/add-floating-back-to-top-button.md +++ b/pages/_notes/add-floating-back-to-top-button.md @@ -9,7 +9,7 @@ sub-title: "" author: "" excerpt: "" snippet: "" -lastmod: 2023-03-11T18:03:19.840Z +lastmod: 2024-03-07T00:01:36.787Z --- [w3 schools](https://www.w3schools.com/howto/howto_js_scroll_to_top.asp) @@ -51,6 +51,26 @@ Style the button: font-size:18px;/* Increase font size */ } +#backToTopBtn { + .text { + display: inline-block; + } + + .arrow { + display: none; + } + + @media (max-width: 600px) { + .text { + display: none; + } + + .arrow { + display: inline-block; + } + } +} + #backToTopBtn:hover { background-color: #555; /* Add a dark-grey background on hover */ opacity: 100%; @@ -62,13 +82,22 @@ Style the button: ```js // assets/js/back-to-top.js -function backToTopBtn () { - topFunction(); - +document.addEventListener('DOMContentLoaded', (event) => { let mybutton = document.getElementById("backToTopBtn"); + + function topFunction() { + document.body.scrollTop = 0; // For Safari + document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera + mybutton.style.opacity = "75%"; + } + + if (mybutton) { + mybutton.onclick = topFunction; + } + // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; - + function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; @@ -76,15 +105,7 @@ function backToTopBtn () { mybutton.style.display = "none"; } } - - // When the user clicks on the button, scroll to the top of the document - mybutton.onclick = function() {topFunction()}; - - function topFunction() { - document.body.scrollTop = 0; // For Safari - document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera - } -} +}); ``` ### Add the JS source to head diff --git a/pages/_posts/2024-03-06-auto-hide-nav-bar.md b/pages/_posts/2024-03-06-auto-hide-nav-bar.md new file mode 100644 index 0000000..cc4409f --- /dev/null +++ b/pages/_posts/2024-03-06-auto-hide-nav-bar.md @@ -0,0 +1,186 @@ +--- +title: Auto Hide Navbar +description: How to update the navbar HTML file to automatically hide while scrolling down and reappear when scrolling up. +author: Github Copilot +excerpt: "To achieve this, you will need to use JavaScript along with CSS. Here's a step-by-step plan:" +date: 2019-08-22T15:20:28.000Z +lastmod: 2024-03-06T23:56:19.751Z +draft: true +tags: + - feature +categories: [] +meta: null +snippet: null +slug: auto-hide-navbar +--- + +# Auto Hide Navbar + +How to update the navbar HTML file to automatically hide while scrolling down and reappear when scrolling up. + +## Question + +bamr87: how do i update the navbar html file to automatically hide while scrolling down and reappear when scrolling up? + +## Answer + +GitHub Copilot: To achieve this, you will need to use JavaScript along with CSS. Here's a step-by-step plan: + +1. Add a unique ID to the navbar in your HTML file. +2. Create a CSS class that will hide the navbar. +3. Write a JavaScript function that will add or remove the CSS class based on the scroll direction. + +Here's the code: + +**HTML:** +```html + +

+``` + +**CSS:** +```css +/* Add this to your CSS file */ +.hide-navbar { + top: -100px; + transition: top 0.3s; +} +``` + +**JavaScript:** +```javascript +// Add this to your JavaScript file +let lastScrollTop = 0; +const navbar = document.getElementById('navbar'); + +window.addEventListener('scroll', function() { + let scrollTop = window.pageYOffset || document.documentElement.scrollTop; + if (scrollTop > lastScrollTop) { + navbar.classList.add('hide-navbar'); + } else { + navbar.classList.remove('hide-navbar'); + } + lastScrollTop = scrollTop; +}); +``` + +This JavaScript code listens for the scroll event. When the user scrolls down (i.e., the current scroll position is greater than the last scroll position), the `hide-navbar` class is added to the navbar, hiding it. When the user scrolls up, the `hide-navbar` class is removed, making the navbar visible again. + +## Issue 1: Error in the Browser + +bamr87: i'm receiving an error in the browser saying "Uncaught TypeError: Cannot read properties of null (reading 'classList')" + +## Answer: Fixing the Error + +GitHub Copilot: The error message "Uncaught TypeError: Cannot read properties of null (reading 'classList')" typically means that the JavaScript is trying to access an element that doesn't exist or hasn't been created yet. + +In your case, it seems like the JavaScript code is trying to access the navbar element before it has been loaded. This can happen if your JavaScript code is placed in the `` of your HTML document, or before the navbar element in the body of your HTML document. + +To fix this, you can either: + +1. Move your JavaScript code to the end of the body of your HTML document, just before the closing `` tag. This ensures that the DOM is fully loaded before your JavaScript tries to access any elements. + +2. Or, you can wrap your JavaScript code in a `window.onload` or `document.addEventListener('DOMContentLoaded', function() {...})` event to ensure that your code only runs after the entire HTML document has been fully loaded. + +Here's how you can do the second option: + +```javascript +window.onload = function() { + let lastScrollTop = 0; + const navbar = document.getElementById('navbar'); + + window.addEventListener('scroll', function() { + let scrollTop = window.pageYOffset || document.documentElement.scrollTop; + if (scrollTop > lastScrollTop) { + navbar.classList.add('hide-navbar'); + } else { + navbar.classList.remove('hide-navbar'); + } + lastScrollTop = scrollTop; + }); +} +``` + +Also, make sure that the ID of your navbar in your HTML matches the ID used in your JavaScript. In this case, both should be 'navbar'. + +bamr87: The navbar is still fixed at the top. + +GitHub Copilot: The navbar is still fixed at the top because the CSS class `hide-navbar` is not effectively hiding the navbar. The `top: -100px;` style may not work if the navbar is positioned fixed or sticky, as it seems to be in your case (since you have the `sticky-top` class applied). + +Instead, you can use `transform: translateY(-100%);` to move the navbar out of view. This will move the navbar up by its own height, effectively hiding it. + +Here's the updated CSS: + +```css +.hide-navbar { + transform: translateY(-100%); + transition: transform 0.3s; +} +``` + +And the JavaScript remains the same: + +```javascript +window.onload = function() { + let lastScrollTop = 0; + const navbar = document.getElementById('navbar'); + + window.addEventListener('scroll', function() { + let scrollTop = window.pageYOffset || document.documentElement.scrollTop; + if (scrollTop > lastScrollTop) { + navbar.classList.add('hide-navbar'); + } else { + navbar.classList.remove('hide-navbar'); + } + lastScrollTop = scrollTop; + }); +} +``` + +This should hide the navbar when scrolling down and show it when scrolling up. + +## Enhancement: Smooth Transition + +bamr87: ok it works now, however, when i scroll back up, i would like the navbar to transistion into view instead of instantly appearing. + +## Answer: Adding a Transition + +GitHub Copilot: Great! To make the navbar transition into view when scrolling up, you need to add a transition property to the original navbar style, not just the `.hide-navbar` class. This will ensure that the transition is applied both when the class is added and when it is removed. + +Here's how you can do it: + +**CSS:** +```css +#navbar { + transition: transform 0.3s; +} + +.hide-navbar { + transform: translateY(-100%); +} +``` + +This CSS code will apply a transition to the `transform` property of the navbar, making it slide smoothly into and out of view when scrolling. + +The JavaScript code remains the same: + +```javascript +window.onload = function() { + let lastScrollTop = 0; + const navbar = document.getElementById('navbar'); + + window.addEventListener('scroll', function() { + let scrollTop = window.pageYOffset || document.documentElement.scrollTop; + if (scrollTop > lastScrollTop) { + navbar.classList.add('hide-navbar'); + } else { + navbar.classList.remove('hide-navbar'); + } + lastScrollTop = scrollTop; + }); +} +``` + +This should give you a smooth transition when scrolling up and down. \ No newline at end of file