Skip to content

Instantly share code, notes, and snippets.

@fahdi

fahdi/sticky-situation.css

Last active November 3, 2023 20:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fahdi/0397fe2d5575adda91dc063d8c6f7c5b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fahdi/0397fe2d5575adda91dc063d8c6f7c5b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fahdi revised this gist Nov 3, 2023. No changes.
  2. fahdi renamed this gist Nov 3, 2023. 1 changed file with 0 additions and 0 deletions.
    0 middle-class.css → sticky-situation.css
    View file
    File renamed without changes.
  3. fahdi renamed this gist Nov 3, 2023. 1 changed file with 0 additions and 0 deletions.
    0 main-middle-class.js → sticky-situation.js
    View file
    File renamed without changes.
  4. fahdi revised this gist Nov 3, 2023. 2 changed files with 12 additions and 9 deletions.
    19 changes: 11 additions & 8 deletions main-middle-class.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,13 @@
    let timeout;
    window.addEventListener('scroll', function() {
    var header = document.querySelector('header'); // Replace 'header' with the appropriate selector for your header element
    var headerRect = header.getBoundingClientRect();

    if (headerRect.top === 0) {
    header.classList.add('middle-class'); // Add the class when the header is touching the top
    } else {
    header.classList.remove('middle-class'); // Remove the class otherwise
    }
    clearTimeout(timeout);
    timeout = setTimeout(function() {
    var header = document.querySelector('header.sticky.on-scroll');
    var headerRect = header.getBoundingClientRect();
    if (headerRect.top === 0) {
    header.classList.add('sticking');
    } else {
    header.classList.remove('sticking');
    }
    }, 100); // Adjust the timeout value to find a good balance between responsiveness and performance
    });
    2 changes: 1 addition & 1 deletion middle-class.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    .middle-class {
    .sticking {
    box-shadow: none !important;
    }
  5. fahdi revised this gist Nov 1, 2023. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions main-middle-class.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,9 @@
    window.addEventListener('scroll', function() {
    var header = document.querySelector('header');
    var scrollPosition = window.pageYOffset;
    var header = document.querySelector('header'); // Replace 'header' with the appropriate selector for your header element
    var headerRect = header.getBoundingClientRect();

    if (scrollPosition > 0) {
    header.classList.add('middle-class'); // Add the class when the header is at the top
    if (headerRect.top === 0) {
    header.classList.add('middle-class'); // Add the class when the header is touching the top
    } else {
    header.classList.remove('middle-class'); // Remove the class otherwise
    }
  6. fahdi revised this gist Nov 1, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion main-middle-class.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@ window.addEventListener('scroll', function() {
    var header = document.querySelector('header');
    var scrollPosition = window.pageYOffset;

    if (scrollPosition <= 0) {
    if (scrollPosition > 0) {
    header.classList.add('middle-class'); // Add the class when the header is at the top
    } else {
    header.classList.remove('middle-class'); // Remove the class otherwise
  7. fahdi revised this gist Nov 1, 2023. 1 changed file with 4 additions and 6 deletions.
    10 changes: 4 additions & 6 deletions main-middle-class.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,10 @@
    window.addEventListener('scroll', function() {
    var header = document.querySelector('header'); // Replace 'header' with the appropriate selector for your header element
    var header = document.querySelector('header');
    var scrollPosition = window.pageYOffset;
    var windowHeight = window.innerHeight;
    var headerHeight = header.offsetHeight;

    if (scrollPosition > 0 && scrollPosition < (document.body.offsetHeight - windowHeight - headerHeight)) {
    header.classList.add('middle-class'); // Replace 'middle-class' with the desired class name
    if (scrollPosition <= 0) {
    header.classList.add('middle-class'); // Add the class when the header is at the top
    } else {
    header.classList.remove('middle-class');
    header.classList.remove('middle-class'); // Remove the class otherwise
    }
    });
  8. fahdi revised this gist Nov 1, 2023. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions middle-class.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    .middle-class {
    box-shadow: none !important;
    }
  9. fahdi created this gist Nov 1, 2023.
    12 changes: 12 additions & 0 deletions main-middle-class.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    window.addEventListener('scroll', function() {
    var header = document.querySelector('header'); // Replace 'header' with the appropriate selector for your header element
    var scrollPosition = window.pageYOffset;
    var windowHeight = window.innerHeight;
    var headerHeight = header.offsetHeight;

    if (scrollPosition > 0 && scrollPosition < (document.body.offsetHeight - windowHeight - headerHeight)) {
    header.classList.add('middle-class'); // Replace 'middle-class' with the desired class name
    } else {
    header.classList.remove('middle-class');
    }
    });