Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
coldpumpkin opened this issue Jun 7, 2021 · 0 comments
Labels

Comments

@coldpumpkin
Copy link

coldpumpkin commented Jun 7, 2021

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

<div class="fixed">
  <div data-sreveal="scale">
     Hello there
  </div>
</div>

<section>
  <p>
    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.
  </p>
  <p>
    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.
  </p>
  <p>
    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.
  </p>
  <p>
    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.
  </p>
  <p>
    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.
  </p>
</section>

JS

ScrollReveal().reveal('[data-sreveal*=scale]', { duration: 2000, scale: 0.2 });

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.)

@coldpumpkin coldpumpkin changed the title Absolute element inside fixed element not revealing at any scroll pos besides 0 Element inside fixed element not revealing at any scroll pos besides 0 Jun 7, 2021
@jlmakes jlmakes added the Bug label Jun 8, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants