So again, when this is out of Vue, we show a button here that again does the same thing. But when it comes back into Vue, it's hidden. Let's see one more quick example. Here's the LaraCast podcast page, and you'll see we have social media links. Well, if I scroll down and those become out of Vue, notice instantly they pop up here. But if I scroll back up and now they're in Vue, they disappear again. Here's how to create something like that for your own website. If I switch to my editor, here's the mockup I have. So notice this button with tons of tailwind classes. That will be, just to be clear, that is this section here, and then the new post link will

like that, or we could add multiple properties. But we could even say, well, when hidden, and then provide a selector. Yeah, maybe that would be an option. This component should only be visible when the element with an ID of newPostLink is hidden. Okay, let's start with that. So if I open my sidebar in our components directory, we'll set up a new Vue component. And yeah, right now I'm calling it visible. That's not overly clear. So we might want to take some time and think of a better name, conditionalVisibility.

That's not overly clear. So we might want to take some time and think of a better name, conditionalVisibility. I'm not sure. Maybe things are hard. We'll stick with this for now. Okay, so it sounds like we're going to have a wrapper here, and then we'll have our main slot content. So that means anything within this tag will be inserted right there. So now, of course, I can say v-show is false to instantly hide anything within there. Let's start with that.

So now, of course, I can say v-show is false to instantly hide anything within there. Let's start with that. Now quickly, I'm going to register a new global component, and then import it. Now I have my watcher running behind the scenes. So if I switch over to Chrome, and I give this page a refresh, this should now disappear, and it does. Okay, great. So now let's switch back here. We know that this value should be dynamic. So let's set up within our data section a property called shouldDisplay, and that way

We know that this value should be dynamic. So let's set up within our data section a property called shouldDisplay, and that way I can configure it. Okay, next, it stands to reason that we will need to listen for when the user scrolls the page. And when they do, we now have a hook to see, well, should we change this value to true? Alright, so once the page has mounted, let's say window.addEventListener, scroll. Now here's the issue with adding a scroll event listener to the document or to the window. The callback is going to fire insanely fast. And in the past, this was always an issue.

The callback is going to fire insanely fast. And in the past, this was always an issue. So let me show you what I mean. If I were to say console.log, hello there, and run this in the browser, let's open up Chrome DevTools, go to the console, give it a refresh. Notice as I scroll, very, very fast, we end up with countless calls to that function as you see right there. That's a half second worth of scrolling, and we already have 100 callbacks. Now in the past, we've solved this with a number of techniques. Throttling and debouncing would be an option.

Now in the past, we've solved this with a number of techniques. Throttling and debouncing would be an option. However, if we're not going to interfere with the scroll position, another option would be to set passive to true. So what this effectively means is our handler here, our callback, is never going to prevent the default action, doing event.preventDefault. So if that's the case, the browser can do various things to drastically improve performance. Anyways, within here, we can now say, well, we want to update the shouldDisplay property, and that should be equal to whether or not the given element is in the viewport. Now don't forget, when we set this up, we decided on a prop name of whenHidden.

and that should be equal to whether or not the given element is in the viewport. Now don't forget, when we set this up, we decided on a prop name of whenHidden. So let's go ahead and accept that. And then we can reference it. document.querySelector, and we'll pass in that selector here. Okay, this is kind of effectively what we want to do here. So when the user scrolls the page, we're going to trigger this code that will update the value of shouldDisplay. And all we're going to do is figure out, and we don't quite know what that is yet, but we're going to figure out, well, is this element in the viewport?

We now see it. Let's bring it back though. Bring it back into view, and now the button hides. Show, hide, show, hide. It's really simple. So now at this point, if you don't want a somewhat jarring entrance, you could add a transition. We could wrap this whole thing within a Transition component. And we can do the props on the fly, or we'll just give it a name of something like fade. Okay, so now various classes will be applied to the transition based on the current state.

And we can do the props on the fly, or we'll just give it a name of something like fade. Okay, so now various classes will be applied to the transition based on the current state. So things like fadeEnter, fadeEnter2, fadeLeave, honestly, it gets a little confusing. But we could say when you fadeEnter or fadeLeave2 will be opacity of zero, because we want it hidden. Otherwise, once they're removed, it'll go back to the default, which is opacity one. Finally, we just need a transition. So fadeEnter when it's actively being entered, or the opposite. In that case, we'll set a transition of the opacity, and I'm going to do it really slow just for now so you can see it in effect.