- This topic has 15 replies, 2 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
April 29, 2020 at 6:42 am #1261124Marcel
Hello,
I would like to ask if it is possible to make, without using a plugin, a block to be sticky on scroll.
To be more explicit, please see this image.
The green block, on the left side (placed in column 1) should remain sticky.
Thank you!
MarcelApril 29, 2020 at 8:30 am #1261424DavidStaffCustomer SupportHi there,
with CSS like this:
.my-sticky-element { position: sticky; position: -webkit-sticky; top: 50px; /* Offset from top of container */ }
April 29, 2020 at 10:16 am #1261621MarcelI am sorry, but it does not work. I’ve read here an article about a possible issue, but I am still confused.
April 29, 2020 at 5:15 pm #1262127TomLead DeveloperLead DeveloperAny chance you can link us to the page so we can see why it’s not working?
April 30, 2020 at 2:40 am #1262607MarcelHello Tom and David,
I created a sequence on a website I have: https://bit.ly/2YnzTZF. Don’t pay attention to the width of the columns, it’s just to show the case. I do not want to use sidebars.
I have 2 columns: A and B. I would like a block on the column A to have the same behaviour as this page on Medium.
I made also a video: https://www.screencast.com/t/Qo3BkLaKzvgqThank you!
April 30, 2020 at 4:12 am #1262738DavidStaffCustomer SupportIt is actually working the problem is the container the sticky-element is in isn’t tall enough.
To fix that edit the Grid Column – and give it a class ofsticky-column
and add this CSS:.sticky-column > .gb-inside-container { height: 100%; }
This will make the inside container the height of the column.
April 30, 2020 at 5:54 am #1262881MarcelNope.
April 30, 2020 at 5:56 am #1262889DavidStaffCustomer SupportMade an edit to the code here
April 30, 2020 at 6:18 am #1262932MarcelDavid,
It is working. Thank you! Now:
1. how to align the block I made sticky at the middle of the column?
2. how to make the first column (A) to appear on mobile devices after column B?
3. how to proceed if I would like to hide the column A on the mobile devices?PS Thank you for the great support, I made a small donation in your account.
Marcel
April 30, 2020 at 6:40 am #1262985DavidStaffCustomer SupportThanks for the donation – much appreciated 🙂
1. Hmmm…. i not sure how that would work ….. you can adjust the
top: 200px;
tosay top: 40%;
– i think I need to see an example to understand how it would work though.2. Select Column B – in the Settings sidebar, select Mobile, and you can change the Order to -1.
3. Give it a CSS Class of
hide-on-mobile
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classesApril 30, 2020 at 6:59 am #1263034MarcelThe example would be the page on Medium. I realize it’s not the same technique, but I’d like to get something similar, at least when the sticky block would be visible for the first time. And I think the easiest way would be to align the block to the middle of the “A” column. This is certainly possible.
April 30, 2020 at 7:34 am #1263086DavidStaffCustomer Supportaaah ok.
So medium is usingposition: fixed;
which positions the element relative to the browser viewport. Which works great when your page is many viewports in length.Position Sticky can be used for a similar function – but remember its relative to its parent container. I used it here for the social icons:
https://gpsites.co/liberte/bedtime-reading/
But it doesn’t really work when relatively positioning it beside another column.
Without any CSS you can select the Grid Block wrapper:
https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-blockAnd set the Vertical Alignment to Center which will do what you require but the column itself will be aligned so no full height green background
April 30, 2020 at 7:40 am #1263101MarcelDavid, thank you so much.
April 30, 2020 at 8:54 am #1263396DavidStaffCustomer SupportYou’re welcome
October 3, 2020 at 5:03 pm #1470993Jesus HiguereyIs there a way to make a block only appear when the user scrolls?
I followed the guide, the sticky block that I made shows up perfectly, but it’s quite unnecessary to load it always at the top, so I wanted to it to be hidden and then it would appear as the user scrolls down.
Thanks
-
AuthorPosts
- You must be logged in to reply to this topic.