@kddy/vue-scrollactive
Version:
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.
90 lines (83 loc) • 2.97 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Scrollactive!</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css"
/>
</head>
<body>
<div id="app">
<header id="site-header" class="nav is-fixed">
<div class="container">
<scrollactive
ref="scrollactive"
:offset="offset"
:always-track="alwaysTrack"
:duration="duration"
:click-to-scroll="clickToScroll"
:bezier-easing-value="easing"
>
<ul class="nav-center">
<li>
<a href="#section-1" class="scrollactive-item nav-item">Section 1</a>
</li>
<li>
<a href="#section-2" class="scrollactive-item nav-item">Section 2</a>
</li>
<li>
<a href="#section-3" class="scrollactive-item nav-item">Section 3</a>
</li>
<li>
<a href="#section-4" class="scrollactive-item nav-item">Section 4</a>
</li>
</ul>
</scrollactive>
</div>
</header>
<div class="buttons">
<button @click="addNewElement()">Add new element</button>
<button @click="removeElement()">Remove last element</button>
<button
@click="alwaysTrack = !alwaysTrack"
v-text="'Always track ' + (alwaysTrack ? 'on' : 'off')"
></button>
<button
@click="clickToScroll = !clickToScroll"
v-text="'Click to scroll ' + (clickToScroll ? 'on' : 'off')"
></button>
<label for="duration">Duration</label>
<input type="number" v-model="duration" id="duration" />
<label for="offset">Offset</label>
<input type="number" v-model="offset" id="offset" />
<label for="easing">Easing (cubic-bezier format)</label>
<input type="text" v-model="easing" id="easing" />
</div>
<main>
<section id="section-1" class="section hero is-primary is-fullheight">
<div class="container">
<h1 class="heading title is-1">Section 1</h1>
</div>
</section>
<section id="section-2" class="section hero is-info is-fullheight">
<div class="container">
<h1 class="heading title is-1">Section 2</h1>
</div>
</section>
<section id="section-3" class="section hero is-danger is-fullheight">
<div class="container">
<h1 class="heading title is-1">Section 3</h1>
</div>
</section>
<section id="section-4" class="section hero is-success is-fullheight">
<div class="container">
<h1 class="heading title is-1">Section 4</h1>
</div>
</section>
</main>
</div>
<script src="https://unpkg.com/vue"></script>
</body>
</html>