Cannot position elements as fixed inside rolly-view
rnrh opened this issue · 9 comments
I am having trouble getting elements with position: fixed; to act as fixed elements inside of the rolly-view target. I would like rolly applied across the site, so the rolly-view target is the <div> directly inside of the <body> tag.
I've tried positioning it fixed, but it scrolls as if it had default positioning. I've tried positioning absolutely as well, considering the rolly-view target itself is a fixed element, but had no luck with this either. I've simplified my markup as much as possible to avoid a possible issue happening between the rolly-view target and the element I am attempting to fix, which was previously many levels down, but was not able to resolve it.
Do you have a recommendation for solving this? I've pasted my simplified code below so you can better understand the structure of my DOM.
import rolly from 'rolly.js';
const view = document.querySelector('.app');
const r = rolly({
view,
native: true,
// other options
});
r.init();@import "../../node_modules/rolly.js/css/style.css";
.fixed-container {
position: fixed;
top: 0;
left: 0;
height: 500px;
width: 500px;
}<html>
<head>...</head>
<body>
<div class="app rolly-view">
<div data-scene data-speed="1">
<header>...</header>
<div class="fixed-container">This is the element I am trying to fix</div>
<div class="page-content">...</div>
</div>
</div>
</body>
</html>I think I have something of a solution in the works, but would appreciate any thoughts you have on the approach. The effect I am trying to recreate is something I do often with scrollMagic, but have never done with momentum scroll also implemented. After looking around a bit it seems like people have not really been able to find a good solution for the issue of calculating where scroll positions should start with scrollMagic and momentum scrolling.
Basically, as the scene starts, the element fixes in the viewport and the container starts translating horizontally, and when the scene is done, the fixed effect goes away and the vertical scroll begins again. Doing a continual transform on the Y axis simulates the effect of it being fixed in the viewport. Here is what my scene looks like:
horizontalScene: {
trigger: 'bottom',
triggerOffset: 0,
transform({
globalState,
sceneState,
transform
}) {
const {
current,
transformPrefix
} = globalState;
const {
context
} = sceneState.cache;
context.style[transformPrefix] = `translate3d(-${current - sceneState.cache.top}px, ${transform + (current - sceneState.cache.top)}px, 0)`;
},
}I set the height of the element based on where I'd like the last element in the scene to end. I am still having trouble with getting it to appear and disappear when I'd like, but I think I'll be able to get there.
Hello @rnrh,
I'm not sure to understand 100% but to sum up:
You want to have a scene that gets fixed while it's going through its trigger. And while fixed, you want to use the progress to play an animation inside or whatever.
Let's use that example:
https://codepen.io/Michkkael/pen/VgLrBX
If the fixed scene was the scene 3, that scene would stop and stay in place while the progress in green is changing. Then, start moving again normally.
Am I right? 🤔
If not and if possible, could you please provide an example of the desired result?
Thanks for getting back to me. Sorry for not being so clear.
Yeah, more or less. When a scene hits its trigger, to be fixed in the viewport, and then to be able to transform elements inside of it. Your description of what would happen with scene 3 is correct. I think if I can at least get that going, I should be able to figure out the translating inside, but if you have an example of that, it would be super helpful.
I thought the approach I posted above in my previous comment would work, but I'm not sure its right. It's causing the scene to be appearing and disappearing in ways that I'm not expecting or understanding, even though its triggering when I would like.
Here is a pen using scrollMagic that shows the effect. When scene twos trigger hits, it fixes, and then the internals translate along the x axis - https://codepen.io/schrdr/pen/xxVxVym
Ok I got it!
I'll come back to you with a working example in the next days. ;)
Hey @rnrh,
So I made a demo for you.
I based the example on my first comment:
https://codepen.io/Michkkael/pen/jOqPVpW
So the 3rd scene is fixed. In terms of logic, you can focus on the config of that scene from L37 to L76 (config.scenes.scene3).
If you wanted to have this scene to be fullscreen, you'd need to add this:
- set the height of the scene to 100vh
- set the trigger of the scene to 0
@mickaelchanrion thanks for this great example! Super helpful.
Sorry to mix issues, and let me know if you’d prefer I open this elsewhere, but do you have any recommendations for doing a same page scrollTo? I believe I saw in another issue that this is currently broken. I did try implementing and was not able to get it working properly.
@mickaelchanrion I think I was able to get to a good solution by summing heights of all preceding elements in the DOM and setting my scrollTop() value to that.
I'm going to close this now. Thanks for the help!
Sorry, I've been quite busy these days. Good to hear that you got a solution.
I need to fix that function anyway, so it can work both in native and virtual mode. I'll remember to send you a message once it's done
@mickaelchanrion No worries. Just a new way of working for me. Please do message when you fix it, I'm planning on using the library in a couple of future projects. Thanks for the help!