Position sticky behaviour confined to specific grid rows
-
Just started playing with Laytheme, wanted to try to make an effect that I have done on other sites which were coded, but proving a bit difficult so asking here. Have checked in the forums but couldn't find a similar query.
Essentially I would like to make an element in a div (or row) fixed/sticky within that row, so that when a user scrolls through on that row, the while images are scroll as normal and the text stays in a fixed position. I suppose you have seen this before.
I have setup the premise here: http://indofutures.com/data-garden. The text I would like to make fixed/sticky would be the "Project Details" and the images to the right would scroll as normal.
This is essentially what I'm trying to do: https://jsfiddle.net/7pcr8fvz/
If you imagine that my text would be the red element (although not aligned to the top of the div, rather the middle). Any ideas on how to get this done? I've been trying to do it with pure CSS/html but hasn't worked yet.
Thanks!
-
Dear @gyoc
probably you need to use CUSTOM JS to do this?
Anyone has some ideas?
Best!
Marius -
Dear @gyoc
it is probably doable but too much to give you the solution for me here in the forum.
I think it is worth to ask a developer. Look here… http://laythemeforum.com:4567/topic/5601/laytheme-customisation-services
Best!
Marius -
Hello @mariusjopen
The problem seems to be specific to laytheme, something with the overflow : hidden that is set by default.
.
Do you have an idea of how to change it so it can makes the function "sticky" works with the jQuery function that has been mentioned many times in the forum. -
Hi there,
Was anybody able to solve the issue?
Best regards,
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it