Is there a way I can make an image in the middle column of a one page website STICK to the top of the page with the navigation bar while the rest of the web elements scroll by?
Any assistance would be greatly appreciated.
Thanks
M@
Absolutely. Here’s a little test project to see one way of doing it. Enjoy 
nav-sticky-content.bloc (49.9 KB)
1 Like
Wow. Seriously thank you very much.
Seems to me that this type of action should be able to be done without a custom bloc.
Thanks again!
M@
1 Like
Does this mean I have to redo my navigation?
The element I want to make sticky isn’t in the navigation area but one bloc below it.
Let me know
The file you posted is a bloc and not a BEX file.
How do I install this bloc if it’s not a BEX file?
Sorry for the questions.
Thanks
Hey @mliving,
the file I posted is a Blocs Project file, so you can see how I did it. I simply added a content area to the navigation bar (just tick the box in the navbar settings). In there is just a simple div with a class that gives it a width of 120px and a height of 350px as well as a background color. I also added a neg. left margin of 60px (half the width of the div) to help center it perfectly. Without the neg. margin, the div would sit with its left side at the center of the parent container (the navbar), which would make it look … off-center. So, however wide you decide you want that div, the neg left margin needs to be half of that to keep it centered correctly.
The complete content area (the col) is then set to be absolutely positioned and set 50% off the left side. Together with the neg. margin of the div, it makes the purple bar centered.
Shouldn’t be too hard to add the bric you have currently in the bloc below to that div and do what I did.
See how I did it, try to replicate it, play around with it, try things out. Much better learning experience also
I’m off to bed now.
PS: Not hard to help others if you got helped (and hence learned a lot) from others here.
PPS: You can of course apply the css rules to the bloc below, but I find that unnecessarily complicated, since you’d have to make that bloc sticky too. Since the navbar is already sticky, and the absolutely positioned div sits in it, it orientates itself on the position of the navbar.
2 Likes
Great thanks!