Scrolled

Adds a CSS class when the document is scrolled past its beginning and another class when it's scrolled upwards. This is useful for hiding the navbar when the user is scrolling down or adding shadows to the navbar:

<nav class="is-scrolled-up" ob-scrolled>
	Navigation
</nav>

<section>
	<p>Vivamus eu volutpat enim. Proin …</p>
	<p>Integer ligula eros, mattis ac …</p>
	<p>Sed eget imperdiet nulla. Vestibulum …</p>
	<p>Nam sed dignissim quam. Sed porta orci …</p>
	<p>Quisque non nibh ullamcorper, rhoncus …</p>
	<p>Nam a mi eget dui accumsan cursus sit …</p>
	<p>Fusce tristique gravida purus non …</p>
	<p>Nulla libero massa, scelerisque quis …</p>
</section>

nav {
	position: sticky;
	top: 0;
	transition: all 0.3s ease-out;
}

nav.is-scrolled {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

nav:not(.is-scrolled-up) {
	transform: translateY(-100%);
	opacity: 0;
}

import { Watcher } from 'oblik'
import { Scrolled } from 'oblik/components/scrolled'

let w = new Watcher(document.body, {
	components: {
		scrolled: Scrolled
	}
})

w.init()

# Options

# classActive

Class name to add when the document is scrolled upwards, i.e. when the navbar should be active.

Default: is-scrolled-up

# classScrolled

Class name to add when the document is scrolled past its topmost position.

Default: is-scrolled

# slack

After how many pixels scrolled down to remove classActive.

Default: 200

# slackActive

After how may pixels scrolled up to add classActive.

Default: 20

# slackScrolled

After how many pixels scrolled down to add classScrolled.

Default: 10

← Scroll To Sensor →