Learn Vue 2: Step By Step: Fixed to the Top

Laravel Error Tracking (AD)

Understand.io is used by hundreds of Laravel developers to find and fix errors.

Sign up for a free 14-day trial now.

Beep Beep. Subscription Required.

Laracasts is packed full with over 1,000 lessons just like this one.
Sign up to get full access or log in to your account and sit back.

Watch everything for $15/mo Log In

About This Episode

In this episode, we'll learn how to fix an HTML element to the top of the page, based upon the current scroll position. This is a common feature in countless websites. We'll tackle the implementation in two steps. First, we'll get it to work in the simplest way possible. Then, we'll refactor toward a reusable component that can be applied anywhere.

Note: JavaScript is necessary to allow for this functionality across all browsers. However, if you have the means, you might instead use CSS to accomplish the same effect much more easily.

Published on Jun 4th, 2018.

Laravel Error Tracking (AD)

Understand.io is used by hundreds of Laravel developers to find and fix errors.

Sign up for a free 14-day trial now.

Discuss It

Looking for the archived Disqus comments?

Episodes

Basic Data Binding

EPISODE 1 4:13 Free
Setup Vue Devtools

EPISODE 2 3:03 Free
Lists

EPISODE 3 5:27 Free
Vue Event Listeners

EPISODE 4 5:04 Free
Attribute and Class Binding

EPISODE 5 5:57 Free
The Need for Computed Properties

EPISODE 6 6:20 Free
Components 101

EPISODE 7 5:02 Free
Components Within Components

EPISODE 8 2:36 Free
Practical Component Exercise #1: Message

EPISODE 9 6:21 Free
Practical Component Exercise #2: Modal

EPISODE 10 5:47 Free
Practical Component Exercise #3: Tabs

EPISODE 11 14:58 Free
Component Communication Example #1: Custom Events

EPISODE 12 5:59 Free
Component Communication Example #2: Event Dispatcher

EPISODE 13 4:03 Free
Named Slots in a Nutshell

EPISODE 14 5:54 Free
Single-Use Components and Inline Templates

EPISODE 15 3:57 Free
Webpack and vue-cli

EPISODE 16 9:31 Free
Hot Module Replacement

EPISODE 17 3:48 Free
Vue Ajax Requests With Axios

EPISODE 18 8:01 Free
Object-Oriented Forms: Part 1

EPISODE 19 17:00 Free
Object-Oriented Forms: Part 2

EPISODE 20 13:15 Free
Object-Oriented Forms: Part 3

EPISODE 21 8:30 Free
Webpack Config From Scratch

EPISODE 22 18:30 Free
This is Laravel Mix

EPISODE 23 10:14 Free
Shared State 101

EPISODE 24 4:28 Free
Custom Input Components

EPISODE 25 8:38 Free
Vue SPA Essentials: Routing

EPISODE 26 16:50 Free
SPAs and the Backend

EPISODE 27 15:01 Free
Vue Filters

EPISODE 28 2:30 Free
Dedicated Form Components

EPISODE 29 14:08 Free
Testing Vue: Part 1

EPISODE 30 13:05 Free
Vue Component Responsibility

EPISODE 31 8:36 Free
Vue Subclassing

EPISODE 32 4:42 Free
Scoped Slots

EPISODE 33 7:55 Free
Wrap Existing Tools into Components

EPISODE 34 11:58
Create a Testimonials Component With Me

EPISODE 35 19:01
The Difference Between Debounce and Throttle

EPISODE 36 9:31 Free
Mega Menus and One-to-One Relationships

EPISODE 37 15:54
Vue Portal Use Case #2

EPISODE 38 7:04
Workshop - Contact Support Modal

EPISODE 39 18:44
Reusability

EPISODE 40 7:08
Reusability: Part 2

EPISODE 41 15:19
Fixed to the Top

EPISODE 42 11:15
Fixed to the Top: Part 2

EPISODE 43 5:31
Tooltips Three Ways

EPISODE 44 18:17
Render Functions: Part 1

EPISODE 45 5:25
Extract and Generalize: Infinite Scrolling Refactor

EPISODE 46 9:44
Count Up

EPISODE 47 14:54
Conditional Visibility and Vue Transitions

EPISODE 48 12:35
Two-Way Databinding Review

EPISODE 49 11:22

Laravel Error Tracking (AD)

Understand.io is used by hundreds of Laravel developers to find and fix errors.

Sign up for a free 14-day trial now.