jlmakes / jlmakes/scrollreveal
Element inside fixed element not revealing at any scroll pos besides 0
- Dominant language
- JavaScript
- Stars
- 22.5k
- Forks
- 2.2k
- PR merge metrics
- No merged PRs in 30d
Description
**The scenario:** I have an element inside a fixed element. The child element has a reveal effect.
**The problem:** The child element only shows up when the page scroll is initial - 0
**How it should behave:** The child element should reveal even if the page scroll is higher than 0 (e.g. when someone reloads the page in the middle of it) since it's inside a fixed element and hence always visible.
**HTML**
```html
Hello there
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```
**JS**
```js
ScrollReveal().reveal('[data-sreveal*=scale]', { duration: 2000, scale: 0.2 });
```
**SCSS**
```scss
[data-sreveal] { visibility: hidden; }
.fixed {
position: fixed;
background-color: #333;
color: #FFF;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
section {
margin-top: 100px;
}
```
https://jsfiddle.net/8a2b9fzr/3/
(scroll down a bit and then right-click > "Reload Frame" in order to simulate refreshing page.)
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce the behavior in the linked JSFiddle by reloading the frame after scrolling, then inspect ScrollReveal's initialization and viewport handling for elements inside fixed containers. Done means the scale reveal appears when the page is reloaded at a nonzero scroll position, without breaking the shown example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100