WordPress.org
Get WordPress

Plugin Directory

Changeset 2851941


Ignore:
Timestamp:
01/20/2023 03:08:23 PM (3 years ago)
Author:
style96
Message:

mainheader offsetHeight variable added css unused removed

Location:
sticky-header-hide-when-scroll-down
Files:
10 added
4 edited

Legend:

Unmodified
Added
Removed

  • sticky-header-hide-when-scroll-down/trunk/assets/css/hide-header-when-scroll.css

    r2851874 r2851941  
    11/*Make Header Sticky - for Astra prior to 3.0*/
    22.main-header-bar {
    3     position: fixed;
    4     top: 0;
    5     width: 100%;
    6         /*transition: top 0.3s;*/
     3  position: fixed;
     4  top: 0;
     5  width: 100%;
    76}
    87
    98/*Adjust Content Padding*/
    109.site-content {
    11     padding-top: 100px;
    12 }
    13 .nav-up {
    14     top: -40px;
     10  padding-top: var(--header-bar-height, 100px);
    1511}
    1612
    1713/*Adjust Content Padding for Mobile*/
    1814@media (max-width: 800px) {
    19     .site-content {
    20         padding-top: 75px;
    21     }
    22     /*Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout*/
    23         .main-navigation {
    24                 position: fixed;
    25                 margin-top: 0px;
    26     }
     15  .site-content {
     16    padding-top: var(--header-bar-height, 75px);
     17  }
    2718}
    2819
    2920/*Adjust Content Padding for Mobile*/
    3021@media (max-width: 650px) {
    31     .site-content {
    32         padding-top: 75px;
    33     }
    34     /*Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout*/
    35         .main-navigation {
    36                 position: fixed;
    37                 margin-top: 60px;
    38     }
     22  .site-content {
     23    padding-top: var(--header-bar-height, 75px);
     24  }
    3925}
    40 
    41 
    42 /**
    43 * header color
    44 */
    45 .main-header-bar.is-pinned {
    46     background-color: #ffc117;
    47     border-bottom: 1px solid black;
    48 }

  • sticky-header-hide-when-scroll-down/trunk/assets/js/hide_navbar_scrolldown.js

    r2851874 r2851941  
    1 var lastScrollTop = 0; 
     1var lastScrollTop = 0;
    22var diff = 0;
    33var directionOverflow = 0;
    … …  
    66var ticking = false;
    77const header = document.querySelectorAll(".main-header-bar");
    8 window.addEventListener('scroll',function(){
    9   var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    10   if(Math.abs(lastScrollTop - scrollTop) < delta){
    11     return;
     8header.forEach((item) => {
     9  if (item.offsetHeight != 0) {
     10    const mainBarHeight = item.offsetHeight;
     11    document.documentElement.style.setProperty(
     12      "--header-bar-height",
     13      mainBarHeight + "px"
     14    );
     15        hheight = mainBarHeight+1;
    1216  }
    13   diff = lastScrollTop -scrollTop + diff;
    14   lastScrollTop = scrollTop;
    15   if(diff < -hheight) {
    16     diff = -hheight;
    17     directionOverflow--;
    18   } else if(diff > 0) {
    19     diff = 0;
    20     directionOverflow++;
    21   } else {
    22     directionOverflow = 0;
    23   }
    24     if(directionOverflow > 1) {
    25         directionOverflow = 1;
    26         return;
    27     }
    28     if(directionOverflow < -1) {
    29         directionOverflow = -1;
    30         return;
    31     }
    32   if (!ticking) {
    33     window.requestAnimationFrame(() => {
    34                 header.forEach(item => {
    35                     item.style.transform=`translateY(${diff}px)`;
    36                 })
     17});
     18window.addEventListener(
     19  "scroll",
     20  function () {
     21    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
     22    if (Math.abs(lastScrollTop - scrollTop) < delta) {
     23      return;
     24    }
     25    diff = lastScrollTop - scrollTop + diff;
     26    lastScrollTop = scrollTop;
     27    if (diff < -hheight) {
     28      diff = -hheight;
     29      directionOverflow--;
     30    } else if (diff > 0) {
     31      diff = 0;
     32      directionOverflow++;
     33    } else {
     34      directionOverflow = 0;
     35    }
     36    if (directionOverflow > 1) {
     37      directionOverflow = 1;
     38      return;
     39    }
     40    if (directionOverflow < -1) {
     41      directionOverflow = -1;
     42      return;
     43    }
     44    if (!ticking) {
     45      window.requestAnimationFrame(() => {
     46        header.forEach((item) => {
     47          item.style.transform = `translateY(${diff}px)`;
     48        });
    3749        ticking = false;
    38     });
    39     ticking = true;
    40   }
    41 }, { passive: true });
     50      });
     51      ticking = true;
     52    }
     53  },
     54  { passive: true }
     55);

  • sticky-header-hide-when-scroll-down/trunk/hide-when-scroll-down.php

    r2851874 r2851941  
    44 * Plugin URI: https://kodlamayabasla.com
    55 * Description: A plugin that hides header on scroll down and appear on scroll up. Only works on Astra Themes.
    6  * Version: 1.0
     6 * Version: 1.0.1
    77 * Author: Halil Sen
    88 * Author URI: https://kodlamayabasla.com

  • sticky-header-hide-when-scroll-down/trunk/readme.txt

    r2851874 r2851941  
    55Requires at least: 5.9
    66Tested up to: 6.1
    7 Stable tag: 1.0
     7Stable tag: 1.0.1
    88Requires PHP: 7.0
    99License: GPLv2 or later
Note: See TracChangeset for help on using the changeset viewer.