Although many mobile browsers do not support <position: sticky>position: fixed is not ideal as it can overlap content at the bottom of the document.
I believe that using jQuery to set a static position for the fixed block while scrolling to the bottom of the document would be straightforward.
However, I am unsure of how to achieve the same functionality in Vue2. Any advice or alternative solutions would be greatly appreciated.
As noted in the previous comments, my suggestion would be to utilize a polyfill if feasible since it has been meticulously crafted for precision. However, here is a straightforward approach on how you can achieve this in Vue.
The application manages scroll events by storing the scrollY value in a data item. The sticky-top component determines its fixed top position and applies it if it's greater than 0. The widget utilizes position: relative.
new Vue({
el: '#app',
data: {
scrollY: null
},
mounted() {
window.addEventListener('scroll', (event) => {
this.scrollY = Math.round(window.scrollY);
});
},
components: {
stickyTop: {
template: '<div class="a-box" :style="myStyle"></div>',
props: ['top', 'scrollY'],
data() {
return {
myStyle: {},
originalTop: 0
}
},
mounted() {
this.originalTop = this.$el.getBoundingClientRect().top;
},
watch: {
scrollY(newValue) {
const rect = this.$el.getBoundingClientRect();
const newTop = this.scrollY + +this.top - this.originalTop;
if (newTop > 0) {
this.$set(this.myStyle, 'top', `${newTop}px`);
} else {
this.$delete(this.myStyle, 'top');
}
}
}
}
}
});#app {
height: 1200px;
}
.spacer {
height: 80px;
}
.a-box {
display: inline-block;
height: 5rem;
width: 5rem;
border: 2px solid blue;
position: relative;
}<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<div class="spacer"></div>
<div class="a-box"></div>
<sticky-top top="20" :scroll-y="scrollY"></sticky-top>
<div class="a-box"></div>
</div>It appears that this solution is effective for me
...
<header
ref="header"
class="header-container"
:class="{ 'header-container--sticky': isHeaderSticky }"
>
...
...
data() {
return{
scrollY: null,
headerTop: 0,
isHeaderSticky: false,
}
},
mounted() {
window.addEventListener('load', () => {
window.addEventListener('scroll', () => {
this.scrollY = Math.round(window.scrollY);
});
this.headerTop = this.$refs.header.getBoundingClientRect().top;
});
},
watch: {
scrollY(newValue) {
if (newValue > this.headerTop) {
this.isHeaderSticky = true;
} else {
this.isHeaderSticky = false;
}
}
}
...
...
.header-container {
&--sticky {
position: sticky;
top: 0;
z-index: 9999;
}
}
...
After discovering that my previous question, which can be found here, is currently not feasible due to limitations with html2canvas only taking 'snapshots', I have chosen to approach the problem differently. The new approach involves making an o ...
Currently trying to trigger an event from router.beforeEach and listening for it in another component. Although the vue devtool confirms that the event is being triggered, my component seems unable to capture it. Thank you for your help. This is how I dec ...
I am currently working on developing an ERP system. I have an HTML invoice that needs to be converted into a PDF and sent via email. My question is regarding how to construct the invoice using jQuery & AJAX, convert it into a PDF format, and then send it ...
I'm still getting the hang of Typescript, but I'm facing some challenges with it when using Vuex/Axios. Current setup includes: Vue CLI app, Vue 2, Vuex 3, Axios, Typescript At a high level, I have a custom Axios instance where I configure the ...
Looking for a way to find an element using a CSS selector in Chrome, I followed these steps: Right-click on the object Select "inspect" Right-click on the highlighted area in Chrome developer tools Choose "copy" Click on "copy selector" This is the cod ...
I inserted multiple paragraphs of text into a column. To ensure the text is responsive and surrounded by a border, I created simple HTML code within a div tag: <p> text here</p> <p> 2nd para</p> <p> 3rd para</p> <p&g ...
How can I prevent the letters from extending beyond the bar when typing a lot of characters? Your assistance in resolving this issue is greatly appreciated. <div id="tasks-container"> <div id="tasks-header"> ...
I'm currently working on creating a menu that navigates between categories. When a category has a sub-category, it should return a boolean value indicating whether it has a sub-category or not. <template> <select><slot></slot ...
I am working on developing a progress bar using vue js and bootstrap for my desktop application. Within the template, I have the code that will generate the necessary markup: <div class="container-fluid p-0 vh-100" v-if="isLoading&quo ...
I'm trying to display the label values within a Highcharts bar chart by utilizing the dataLabels.Formatter function. However, I've noticed that when the bar size is inconsistent, the labels are sometimes displayed inside the bar, which looks goo ...
For my design project, I have crafted two unique modals that will pop up when their corresponding button is clicked. However, I have set it up so that each button is only visible on certain screen sizes using CSS @media query. Now, I am looking to make a ...
Is it possible to fetch data in App.vue and pass the value to this.store.data so that it can be used for all other components? The issue I am facing is that when I click on the link (router-link), the function inside the components runs before fetching dat ...
Can someone help me with implementing a fading animation for changing the background color on scroll in React? I have successfully achieved the background change effect, but I'm struggling to incorporate the fading effect. import React from "reac ...
Within the main component, I have: <notification-row v-for="(item, index) in notifications" :key="index" :item="item" /> Inside the child component, it looks like this: ... <tr class="notification-row" ...
I am facing a dilemma in my NextJS app. On the /home page, I need to hide the x and y overflow, while on the /books page, I want the user to be able to scroll freely. The issue is that Next only allows for one global stylesheet and using global CSS selec ...
I am quite comfortable with HTML and CSS, but I'm struggling to make the 'back to top' button work on my Tumblr page. Can someone please give me a hand? I've included some JQuery code to make the text fade in and out when scrolling (inf ...
After successfully running my app on localhost, I encountered CSS issues when deploying it on Heroku. Some of the CSS appears as struck-through in Chrome. How can I identify what is overriding my styling? https://i.sstatic.net/U23fg.png ...
I'm trying to figure out how to pass the parent component's method to the child component. Here's the scenario: when I click the confirm button on my modal (child component), it needs to send the data from the parent form (parent component). ...
How can I make the image and image select and delete buttons responsive? I am looking to eliminate the gap after the delete button. Any suggestions are welcomed. <div class="container mt-0"> <div class="row"> ...
Adding the border-radius CSS property to my dropdown component from ant design has been a bit challenging for me. I attempted to modify the antd-css file and include a style object directly into the component, but unfortunately, I did not achieve the des ...