Sticky main header
This commit is contained in:
parent
38ba5be728
commit
83be97e3c6
|
|
@ -1,7 +1,9 @@
|
|||
header {
|
||||
background: #fff;
|
||||
margin-bottom: 2.2rem;
|
||||
position: sticky;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
|
||||
.wide-container {
|
||||
|
|
@ -13,6 +15,17 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
.header--scrolled-bottom,
|
||||
.header--scrolled-top {
|
||||
.main-logo {
|
||||
height: 56px;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__inner {
|
||||
background: #fff;
|
||||
border-bottom: 4px solid #000;
|
||||
|
|
@ -40,8 +53,9 @@ header {
|
|||
display: inline-flex;
|
||||
height: 70px;
|
||||
padding: 0 $container-padding-x 0 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: height 0.2s;
|
||||
text-align: center;
|
||||
z-index: 9;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
|
|
@ -49,6 +63,10 @@ header {
|
|||
}
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
object-position: left;
|
||||
transition: height 0.2s;
|
||||
vertical-align: middle;
|
||||
width: 100px;
|
||||
|
||||
|
|
@ -84,40 +102,51 @@ nav {
|
|||
}
|
||||
|
||||
.main-navigation {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
@include font-size(1.7rem);
|
||||
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
ul {
|
||||
display: inline-flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
opacity: 1;
|
||||
padding: 0;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
font-size: 2.6rem;
|
||||
font-weight: bold;
|
||||
left: 0;
|
||||
padding: $container-padding-x;
|
||||
position: fixed;
|
||||
top: 74px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
@include media-breakpoint-down(md) {
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
font-size: 2.6rem;
|
||||
font-weight: bold;
|
||||
left: 0;
|
||||
padding: $container-padding-x;
|
||||
position: fixed;
|
||||
top: 74px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
li {
|
||||
margin-bottom: 2.4rem;
|
||||
li {
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding: divide($container-padding-x, 2);
|
||||
}
|
||||
|
||||
.header--scrolled-bottom & {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding: divide($container-padding-x, 2);
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
display: inline-flex;
|
||||
ul {
|
||||
display: inline-flex;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: block !important;
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -132,8 +161,8 @@ nav {
|
|||
.selected a {
|
||||
border-bottom: 2px solid;
|
||||
color: #000;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -213,3 +242,24 @@ nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-header {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
left: 0;
|
||||
margin: 0.2em;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
text-overflow: ellipsis;
|
||||
transition: opacity 0.3s, z-index 0s 0.3s;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
|
||||
.header--scrolled-bottom & {
|
||||
transition: opacity 0.3s;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { useStore } from '@nanostores/solid'
|
|||
import { session as ssession } from '../../stores/auth'
|
||||
import { route, router } from '../../stores/router'
|
||||
import './Header.scss'
|
||||
import { Shout } from '../../graphql/types.gen'
|
||||
|
||||
const resources = [
|
||||
{ name: t('zine'), href: '/' },
|
||||
|
|
@ -18,9 +19,10 @@ const resources = [
|
|||
//{ name: t('community'), href: '/community' }
|
||||
]
|
||||
|
||||
export const Header = () => {
|
||||
export const Header = (props: Shout) => {
|
||||
// signals
|
||||
const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
|
||||
const [getIsScrolled, setIsScrolled] = createSignal(false)
|
||||
const [fixed, setFixed] = createSignal(false)
|
||||
const [visibleWarnings, setVisibleWarnings] = createSignal(false)
|
||||
// stores
|
||||
|
|
@ -46,13 +48,12 @@ export const Header = () => {
|
|||
const enterClick = route(() => showModal('auth'))
|
||||
const bellClick = createMemo(() => (authorized() ? route(toggleWarnings) : enterClick))
|
||||
|
||||
const root = null
|
||||
|
||||
onMount(() => {
|
||||
let scrollTop = window.scrollY
|
||||
|
||||
const handleScroll = () => {
|
||||
setIsScrollingBottom(window.scrollY > scrollTop)
|
||||
setIsScrolled(window.scrollY > 0)
|
||||
scrollTop = window.scrollY
|
||||
}
|
||||
|
||||
|
|
@ -65,8 +66,8 @@ export const Header = () => {
|
|||
return (
|
||||
<header
|
||||
classList={{
|
||||
['header--scrolled-top']: !getIsScrollingBottom(),
|
||||
['header--scrolled-bottom']: getIsScrollingBottom()
|
||||
['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
|
||||
['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
|
||||
}}
|
||||
>
|
||||
<Modal name="auth">
|
||||
|
|
@ -79,17 +80,24 @@ export const Header = () => {
|
|||
<img src="/logo.svg" alt={t('Discours')} />
|
||||
</a>
|
||||
</div>
|
||||
<ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
|
||||
<For each={resources}>
|
||||
{(r: { href: string; name: string }) => (
|
||||
<li classList={{ selected: r.href === subpath() }}>
|
||||
<a href={r.href} onClick={route}>
|
||||
{r.name}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
<div class="col main-navigation">
|
||||
<div class="article-header">
|
||||
Дискурс — независимый художественно-аналитический журнал с горизонтальной редакцией,
|
||||
основанный на принципах свободы слова, прямой демократии и совместного редактирования.
|
||||
</div>
|
||||
|
||||
<ul class="text-xl inline-flex" classList={{ fixed: fixed() }}>
|
||||
<For each={resources}>
|
||||
{(r: { href: string; name: string }) => (
|
||||
<li classList={{ selected: r.href === subpath() }}>
|
||||
<a href={r.href} onClick={route}>
|
||||
{r.name}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="usernav">
|
||||
<div class="usercontrol col">
|
||||
<div class="usercontrol__item">
|
||||
|
|
|
|||
|
|
@ -533,6 +533,7 @@ figcaption {
|
|||
|
||||
.main-content {
|
||||
flex: 1 100%;
|
||||
padding-top: 100px;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user