I'm scratching my head with something that might seem a begginer's issue but can't seem to fix it.
I'm making a one-page website with about 3-4 screen heights of scrolling (3-4 anchors).
I want to pin an image to the top right of the browser on the first screen. But I want to do this without
it being present throughout the whole scroll process.
I have to mention that the image exceeds the screen area and I just want a part of it to show up (see screenshot)
Here is what i tried:
1. if i pin it top right i get the desired effect but it overlaps the other screens
2. If i do not pin it or it i pin it to the page (not browser) the page strangely extends to the right. The horizontal scrollbar appears.
I don't want that to happen. It does not happen when i pin to browser and that's my intended effect.
MORESO when using no pinning or pin to page - when i click on an anchor it scrolls diagonally not vertically. for example
if i click contact is scroll diagonally to the websites lower right corner...
any solutions to this issue? i guess it's something simple which i just missed until now.
Copy link to clipboard
You have to decide: pin it to browser and it stays there (that`s the trick about pinning) OR don`t pin it.
If you want to achieve this "please leave the screen after some scrolling" then you have to chose scroll motion effects for this.
The only disadvantage might be that this only works with fixed width breakpoints instead of fluid width breakpoints.
But seeing your screenshots with lots of text, I would recommend anyway to use fixed width breakpoints.
Very important: nothing should be outside the canvas at any position of the scrubber (grey tool at the right hand side of the breakpoint bar).
Using fixed width breakpoints this issue might disappear.