diff options
| author | Darshan Baral <darshanbaral@gmail.com> | 2020-05-12 05:21:33 +0300 |
|---|---|---|
| committer | Darshan Baral <darshanbaral@gmail.com> | 2020-05-12 05:21:33 +0300 |
| commit | 02a5a30ec60d079f9b7347766f45ccbd2bcc7ec5 (patch) | |
| tree | bf7a4619d3021fc74567c43ebe6b079b21436947 | |
| parent | 43aeeccd356bf344d13a89414c9ee706c36c9dbb (diff) | |
hides header on scroll down
| -rw-r--r-- | layouts/partials/head.html | 44 | ||||
| -rw-r--r-- | static/css/main.css | 3 |
2 files changed, 37 insertions, 10 deletions
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index a179cac..997cbc8 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -8,20 +8,17 @@ <meta name="description" content="{{ .Site.Params.description }}" />
<meta name="author" content="{{ .Site.Params.author }}" />
- <meta
- property="og:url"
- content="{{ .Permalink }}"
- />
+ <meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:type" content="website" />
- <meta property="og:title" content="{{ .Site.Params.title }}{{ if .Title }} - {{ .Title }} {{ end }}" />
- <meta property="og:description" content="{{ .Site.Params.description }}" />
<meta
- property="og:image"
- content="{{ `images/profile.jpg` | absURL }}"
+ property="og:title"
+ content="{{ .Site.Params.title }}{{ if .Title }} - {{ .Title }} {{ end }}"
/>
+ <meta property="og:description" content="{{ .Site.Params.description }}" />
+ <meta property="og:image" content="{{ `images/profile.jpg` | absURL }}" />
{{ with .OutputFormats.Get "rss" -}}
- {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+ {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}
<link rel="stylesheet" href="{{ `/css/main.css` | relURL }}" />
@@ -35,4 +32,33 @@ font-size: {{ .Site.Params.theme.fontSize | safeCSS }};
}
</style>
+
+ <script>
+ let initialY;
+ window.onload = function () {
+ initialY = window.scrollY;
+ };
+
+ window.addEventListener("scroll", () => {
+ let currentY = window.scrollY;
+ let header = document.querySelector("header");
+
+ if (
+ document.body.offsetHeight - (window.innerHeight + window.pageYOffset) < 10
+ ) {
+ initialY = currentY;
+ header.style.top = "0";
+ }
+
+ if (currentY - initialY > 60) {
+ initialY = currentY;
+ header.style.top = "-58px";
+ }
+
+ if (currentY - initialY < -5) {
+ initialY = currentY;
+ header.style.top = "0";
+ }
+ });
+ </script>
</head>
diff --git a/static/css/main.css b/static/css/main.css index 778e2d9..af288f1 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -37,6 +37,7 @@ header { position: fixed;
top: 0;
z-index: 30;
+ transition: all 0.3s;
}
header,
footer {
@@ -297,4 +298,4 @@ li.page-item:nth-child(6) { max-width: 95%;
display: block;
margin: 1em auto;
-}
+}
\ No newline at end of file |