jlmakes / jlmakes/scrollreveal

Element inside fixed element not revealing at any scroll pos besides 0

Open
#538 0 comments 0 reactions 0 assignees View on GitHub
Bug
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.