<div class="font-semibold">This snippet allows you to make (almost) any header sticky on the page which hides itself when you scroll down, but pops-up again when you scroll up. And as a bonus a step-by-step guide on how to implement this in Oxygen Builder.</div>

---
It’s simple, yet a very fancy, way to prevent your header taking up space which can be used for displaying your content. This snippet contains a small piece of Javascript and a couple of lines of CSS, and in return you’ll get the following:


<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="result" data-slug-hash="MWmLdKX" data-user="Grezvany13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Grezvany13/pen/MWmLdKX">
  Sticky Header - Scroll Up Show</a> by Johan de Jong (<a href="https://codepen.io/Grezvany13">@Grezvany13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async defer src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

If you look at the source of the above example it may look a lot to handle, so let’s break it down. And don’t worry about the HTML or LESS, the important parts are just a single class in the HTML and a couple of lines of (plain) CSS.

## HTML
This is the easiest part; add a single class to the element you want to make sticky! That’s it, no complex HTML structure or the need to redesign your website to have a simple script be able to do it’s work.
```html

<header class="jd-sticky">
</header>


<div class="jd-sticky">
</div>


<nav class="jd-sticky">
</nav>
```
Just add .jd-sticky to whatever element you want to have sticky, and continue the next steps to have it work.

## CSS
The second step is to add a class to the element you want to make sticky, which in this case is the header.
```css
/**
 * Sticky CSS
 */
/* add padding-top to match height of the header */
body {
    padding-top: 70px;
}
/* on mobile the header is twice as hight, and so should the padding be */
@media (max-width: 768px) {
    body {
        padding-top: 140px;
    }
}
/* make header fixed to the top */
.jd-sticky {
    position: fixed;
    top: 0;
    /* and a smooth transition, so it won't just pop in and out the screen */
    transition: top 700ms linear;
}
```
Two things are happening here; first we add a padding-top to the body, so there will always be some room for the header to be displayed. The reason is because of the second part of the CSS; we make the header stick to the top of the page with position:fixed, which puts the whole element over the rest of the content.
Of course you’ll need to change the padding (both for desktop and tablet/mobile) based on the size of your header element.

With just this small CSS snippet you will already have a sticky header, but we obviously want a bit more.

## Javascript
The last step is to add some javascript which will handle the showing and hiding of the header when scrolling up and down.
```javascript
/**
 * Sticky JS
 */
/* set the element you want to make sticky */
const headerElem = document.querySelector('.jd-sticky');
/* set the offset on which the hide effect has to wait */
const scrollOffset = 200;

/* DO NOT MODIFY BELOW */
/* get the current page position */
let prevScrollpos = window.pageYOffset;

/* monitor when the page is being scrolled */
window.addEventListener('scroll', () => {
    /* check if the scroll offset is passed */
    if (window.pageYOffset > scrollOffset) {
        /* get the new page position after scrolling */
        let currentScrollPos = window.pageYOffset;
        /* check the new page position with the old position */
        if (prevScrollpos > currentScrollPos) {
            /* if scrolling UP, show the sticky element */
            headerElem.style.top = '0';
        } else {
            /* if scrolling DOWN, hide the sticky element */
            headerElem.style.top = '-100%';
        }
        /* set the page position, so it can be checked the next time */
        prevScrollpos = currentScrollPos; 
    }
});
```
The Javascript is very simple, but very effective. It takes the element which needs to be affected, in this case .jd-sticky, and will change the top position depending on your scroll behavior.

And that’s all folks! Just a single class added to your HTML and a couple of lines of CSS and Javascript, and you’ll have easy sticky header with scroll effects.

## Oxygen
Since we at Jacht.digital use Oxygen Builder a lot, and know it can be a bit challenging to add custom styles and scripts, here a step-by-step guide on how to do it yourself.

It doesn’t matter what your current website looks like, so in this example we simply took one of the default presets in Oxygen Builder. It is important that the whole block, in this case the header, can be selected as one.

<img src="https://jacht.digital/wp-content/uploads/sticky-oxygen-step0-1024x608.png.webp" loading="lazy" alt="Step 0" />

As with the implementation without Oxygen Builder, all you have to do now is add the .jd-sticky class to the header element. This can be done by selecting the element from the Structure list and add the classname manually in the right sidebar. Make sure you didn’t select a breakpoint or state, otherwise it may only work in those specific cases.

<img src="https://jacht.digital/wp-content/uploads/sticky-oxygen-step1.png.webp" loading="lazy" alt="Step 1" />

Now it’s time for the CSS and Javascript, which can be added easily with a codeblock. In this example we added the codeblock component “somewhere” in the header element, so it’s easier to find back. However as long as it’s always available when you show the header (so anywhere in any template or reusable-part which is shown together with the header) you’ll be fine.

In here we add the CSS in ‘Advanced’ -> ‘CSS’ and make the changes when needed.

<img src="https://jacht.digital/wp-content/uploads/sticky-oxygen-step2-1024x608.png.webp" loading="lazy alt="Step 2" />

And we add the Javascript in ‘Advanced’ -> ‘JavaScript’.

<img src="https://jacht.digital/wp-content/uploads/sticky-oxygen-step3-1024x608.png.webp" loading="lazy" alt="Step 3" />

Keep in mind that Oxygen Builder is not very smart when it comes to loading javascripts in the editor, so if you just copy&paste the code it will most likely show an error message that variables already exist.
To fix this all you have to do is place the code inside the following block:

```javascript
(function() {
    // rest of code
})();
```

Now save the template and you’re done!

<figure><video controls="" src="https://jacht.digital/wp-content/uploads/sticky-oxygen-video.webm"></video></figure>

Sticky header with show/hide on scroll


<div class="font-semibold">In a world where websites need to be fast and everyone shouts to optimize everything, there is one thing which is always mentioned: "cache". But what is it, how does it work and which layers of cache are there?</div>

---
## What is Cache
> A cache is a hardware or software component that stores data so that future requests for that data can be served faster.
> 
> *source: [Wikipedia](https://en.wikipedia.org/wiki/Cache_(computing))*

Most websites and web applications need to execute code to be able to generate the HTML required for the browser to display. Depending on the code this can be very slow, especially when a lot of calculations are needed.

For example a simple WordPress website will run several queries to a database, loop over the results, put everything in their correct structure and markup, and only then it will send all the data (at once) back to the browser.

With proper caching in place the above will only happen once, for all visitors, until it needs to be refreshed. And not only will it make responses much quicker for the visitors, but it will also reduce the stress on the server, which in result will make it faster in case some content is not cached yet.

Of course the above image is a simplified view on how cache works and can be in multiple layers, even at the same time. It can be handled at the server, at the client and in between. Usually complimenting each other, but sometimes also working against each other.

## How does it work
Don’t worry, this won’t be a very technical explanation on how it all works. That would require a full post per cache layer. However in essence they all work the same.

When a request is made by the browser (entering the URL or clicking a link) this will go towards the server. A cache system will catch this request and check if it already knows what should be returned as a response. If it does, it will stop the normal request and send the data it has directly back to the browser.

In case it has no cached response it will wait till the server has handled the request and catch the response while it’s sent back to the browser. At this moment it will store both the request and the response in its own storage. This way, the next time the exact same request comes by it can send back the response which it has stored.

### But what happens when the response isn’t valid anymore?
There are many reasons why a cached response is not correct anymore and needs to be removed or replaced by an updated version.
Most cache systems have a maximum lifetime or  for data to be valid before it will delete it and wait for an updated response. This can be as short as milliseconds up to years if needed or wanted.

In addition to a maximum lifetime, do most cache systems have the option to “purge” their cache, either per item or everything at the same time. And some systems even allow the client, like a browser, to request uncached responses or only when the creation time is within a specific timeframe.

## The many methods and layers of cache
Now that we know what cache is and how it works, let’s look at “a couple” of methods which are commonly used in PHP web development.

### Server-Level Caching
#### PHP Opcode Caching
Whenever a piece of PHP code is executed the server needs to read all the files from the hard drive and combine them before it can read and run the code. With Opcode Caching the code from the scripts is stored in the memory of the server for quicker access since reading data from memory is a lot faster than from a drive.
Some well known engines are OPcache, APC, and Xcache.

#### Object Cache
Access to the database can be slow, especially with more complex queries. With Object Cache the queries, and their results, are stored in memory or a seperate location to return the data even faster.

Redis and Memcached are common systems used for this.

#### Page Cache
The name says it all, it stores the complete (HTML) page into a cache so it returns everything at once, without the need of compiling the code or doing (heavy) database queries.
For example Nginx and Redis can do this.

#### Web Server Accelerator
Web server accelerator, sometimes referred to as reverse proxies or Application Delivery Controllers, does the same as Page Caching except it works before hitting the server software itself. This means even less to do for the server and thus more resources available for other requests.
Varnish is one of the most common tools.

#### Content Delivery Network (CDN)
A CDN works differently from the above types of caching, because it’s (usually) not handled by the same server as where the website/application is running.

By offloading assets like images, stylesheets and javascript files to a completely different server optimized for serving those files it will reduce the amount of requests made to the server. In some cases it’s even possible to access files which are used across multiple websites, making browser cache even more optimal.

### Application-Level Caching
#### Browser Caching
By setting a minimum (or maximum) lifetime to an asset on the server the browser will not only download the file, but also store it locally. This way, the next time the same file is required it will simply take the stored version instead of downloading it again from the server.

All browsers do this by default, but it does require proper settings at the server (or CDN).

### Other types?
#### Cache prefetching
Not really a type of caching, but it certainly speeds up the process of requesting and receiving data. By requesting data before it’s actually needed, at a time where it doesn’t hurt performance, the moment the data is needed it will already be present and the browser doesn’t need to wait for it.

It’s possible to do 2 types of prefetching: **DNS Prefetch** and **Content Prefetch.**
With DNS Prefetch only the DNS records are retrieved, which means the IP address and location (through the maze of servers all around the world) are gathered and stored. Normally this can take some time, so doing this beforehand will make loading files from that specific location (usually an external location) a bit faster.

Content Prefetch will get files and assets before required, and places it in the browser cache for quicker access in the future. In some cases even full pages are being loaded, making the transition from the current to the next page almost instant.

## So what do I need?
In short; all of them. Each cache system works differently but can work together with other levels without a problem. Just keep in mind that some systems require complex configurations specifically for your website or application. However a lot has been configured already when using a good hosting provider, plugins/extensions for your CMS/framework and standard setups.

One thing to keep in mind is the complexity of your project and how dynamic it has to be. Caching is most useful for static content, especially Page Cache and CDN’s. When you have a lot of dynamic content (like  a search page with a lot of different filters) you’ll be better off with more high level caching like Object Cache

Blog: Web Development

Sticky header with show/hide on scroll

Understanding Cache