score:0
Accepted answer
the window.pageyoffset
shows the scrollbar position of the document body. you should be looking for the scrollbar position of the parent element instead.
below there's a hook which you can use to get the scrollbar position of any html element. it attaches an event handler for the scroll event which tracks the element's scrolltop
property.
import { usestate, useref, uselayouteffect } from 'react';
export default function usescrollbarposition() {
const [top, settop] = usestate(0);
const ref = useref();
uselayouteffect(() => {
function gettopposition() {
const topposition = ref.current.scrolltop;
settop(topposition);
}
ref.current.addeventlistener('scroll', gettopposition);
gettopposition();
return () => ref.current.removeeventlistener('scroll', gettopposition);
}, []);
return [ref, top];
}
then apply it to your element like this:
import usescrolltop from './use-scroll-top';
function foocomponent() {
const [ref, top] = usescrolltop();
console.log(top);
return (
<parent ref={ref}>
<child parentposition={top} />
</parent>
);
}
score:0
try to use position: sticky for header https://developer.mozilla.org/en-us/docs/web/css/position
Source: stackoverflow.com
Related Query
- Find position of element in react when CSS is using overflow: scroll
- Using a ref to find and scroll to the top position of child element in React
- How to keep scroll position using flatlist when navigating back in react native ?
- Scroll to element when redirected using <Link> React
- Unable to find an element with the text: "myText" error when using react-testing-library
- ReactJS change color of element on scroll and when certain position is reached
- Error: Unable to find an element with the text when I try a test with Jest in React
- React scroll position after render when scrollTop is zero
- Keep scroll position when adding element to the top
- How do I add a custom font to my Card Element when using React Stripe Elements?
- React - Apply **active** class to an element using CSS modules
- aria-live element being read multiple in NVDA when using React
- React scroll component to view inside overflow hidden element
- CSS not changing when using React Router to route to another component
- react / css - transform animation - move an element when click
- Why is webpack unable to find react when I'm using a custom entry point?
- cant add image in react getting an error Error: Cannot find module './undefined' when using require
- What is the best way to include css files for Prime React components when using Parceljs?
- React Force horizontal scrolling as vertical scroll when reaching element view
- Scroll to top when using pagination in React
- How to individually change text color and font weight in the same div element using Tailwind CSS and React
- Auto scroll to anchor tag element in react using componentDidUpdate
- How to improve React performance when change element position with a lots children element
- How do I access the 'currentImageIdIndex' when using the stack scroll tool in Cornerstone.js in a React functional component?
- Child list element still get re-rendered when using unique key id in React
- Mouse Wheel / Scroll event in React element without overflow (picture zoom)
- Typescript error showing up when update method for state element by using React useState
- How to get the ref.current dom element when using react-select and react refs?
- How to find out if element in react have onClick event using dom
- How to overriding css by using dom element in react
More Query from same tag
- How to pass input from React Form to Axios get request and display the request result?
- stop parent onClick when child is clicked (React or vanilla JS)
- Link to is behaving in different manner in React
- Export to CSV button in react table
- How to handle async data in ComponentDidUpdate?
- .map() undefined even though I pass an array
- StreamedResponse in Symfony4
- TypeError: Cannot read property 'method' of undefined using react router (express)
- Cannot read property 'function' of undefined
- how to set placeholder as an object in textarea element?
- ReactJS: On scroll, debounce - test scroll distance - if true - load more components
- How to handle Mobile screens
- Access the value from array of objects
- Render one of the children based on condition
- Remove outline only on click event
- How to separate redux reducers that rely on each other?
- CountDown Timer with start/Pause and reset button
- Loop over named objects in state and pass to child components with React?
- React PropTypes import class. Prop type is invalid
- How to re-render the same component after deleting using react and redux?
- ESLintError in plugin 'gulp-eslint' - Parsing error: Unexpected token
- Redux, toggling state does not work as expected
- React meta tags not working for Facebook
- How do i render the Array value by comparing another array in ReactJs
- Javascript combine 2 map arrays
- Trying to load large json files using file-loader and webpack
- Django Rest Framework + React - token vs session authentication
- How do I make 'forgot password' working in react-aad-msal with Azure AD B2C?
- React native flatlist, not updating correctly when deleting element from state
- How to animate label using JavaScript (React JS)