How to trigger callback method only when it appears on the screen
See original GitHub issueScreenshot to show issue
Source code
<template>
<div>
<header>
<nav :class="{sticky:stickyActive}">
<div class="container">
<div class="row">
<img
v-if="!stickyActive"
src="../assets/logo-white.png"
alt="Omnifood Logo"
class="logo"
>
<img v-else src="../assets/logo.png" alt="Omnifood Logo" class="logo-black">
<ul class="main-nav">
<li>
<a href="#">Food Delivery</a>
</li>
<li>
<a href="#">How It Works</a>
</li>
<li>
<a href="#">Our Cities</a>
</li>
<li>
<a href="#">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="hero-text">
<h1>Goodbye junk food
<br>Hello super healthy meals
</h1>
<a href="#" class="bttn bttn-full">I'm hungry</a>
<a href="#" class="bttn bttn-ghost">Show me more</a>
</div>
</header>
<section
class="section-features"
v-waypoint="{active: true, callback: onWaypoint, options: intersectionOptions}"
>
<div class="container">
<div class="row">
<h2>get food fast — not fast food</h2>
<p
class="long-copy"
>Hello, we're Omnifood, your new premium food delivery service. We know you're always busy. No time for cooking. So let us take care of that, we're really good at it, we promise!</p>
</div>
<div class="row">
<div class="col-md-3 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>
</div>
<div class="col-md-3 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="col-md-3 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!</p>
</div>
<div class="col-md-3 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!</p>
</div>
</div>
</div>
</section>
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="../assets/1.jpg" alt="1">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="../assets/2.jpg" alt="2">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="../assets/3.jpg" alt="3">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="../assets/4.jpg" alt="4">
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="../assets/5.jpg" alt="5">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="../assets/6.jpg" alt="6">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="../assets/7.jpg" alt="7">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="../assets/8.jpg" alt="8">
</figure>
</li>
</ul>
</section>
.......
</template>
<script>
export default {
data: function() {
return {
intersectionOptions: {
root: null,
rootMargin: "0px 0px 0px 0px",
threshold: 0 // [0.25, 0.75] if you want a 25% offset!
}, // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
stickyActive: false,
mobileAppActive: false
};
},
methods: {
onWaypoint({ going, direction }) {
if (direction === this.$waypointMap.DIRECTION_TOP) {
this.stickyActive = true;
} else if (direction === this.$waypointMap.DIRECTION_BOTTOM) {
this.stickyActive = false;
}
},
onMobileAppLogo({ going, direction }) {
if (direction === this.$waypointMap.DIRECTION_TOP)
this.mobileAppActive = true;
}
}
};
</script>
I would like to trigger callback method when scroll on the desired element and also trigger it after preveious elements are not shown on the screen. How to achieve this?
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Getting a callback function to trigger after clicking on an alert ...
Yes. Just execute the callback after the alert. alert("You are being redirected"); callback();.
Read more >JavaScript Callback Functions – What are Callbacks in JS and ...
In JavaScript, the way to create a callback function is to pass it as a parameter to another function, and then to call...
Read more >The activity lifecycle | Android Developers
An Activity is an application component that provides a screen with which users can interact in order to do something, such as dial...
Read more >Advanced Callbacks | Dash for Python Documentation | Plotly
In certain situations, you don't want to update the callback output. You can achieve this by raising a PreventUpdate exception in the callback...
Read more >Understanding the Event Loop, Callbacks, Promises, and ...
setTimeout takes two arguments: the function it will run asynchronously, and the amount of time it will wait before calling that function. In ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Then just edit your thresholds. You can find a demo here showing some thresholds: https://scaccogatto.github.io/vue-waypoint/
And this is the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer
Ok thanks