Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

sticky information box on scroll


Go to solution Solved by AThompson_social,

Question

Site URL: https://www.socialive.us/bcg-case-study

Hi all on this page  (password ccs) there is an informational box. 

When you scroll past the hero image i would like that box to stay fixed to the top as you continue to read the other information. I cannot, for the life of me, figure it out. 

Here are two other pages that have the function I'm looking for 

https://thirtyeightvisuals.com/blog/resources

https://slack.com/customer-stories/zendesk

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

7 answers to this question

Recommended Posts

  • 0

Here is the solution that a friend helped me out with. IT WORKS

I see what you're trying to do.
Position sticky is really cool but it can be very finicky sometimes.
There are three main factors that need to be present when using position sticky:
1. The direct parent container holding the sticky thing needs to be as long as the area you want the thing to scroll. In this case, that would be the whole column next to your text.
2. The top offset has to be declared, to tell your browser how far away from the top edge it should stick the element.
3. NONE of the parent/ancestor containers of the sticky element can have an overflow different to "visible". If one of them does, then the sticky element won't be able to use the viewport as reference to stick on scroll.
That being said, here's what I would do:
First, instead of adding position: sticky to the inner div you created (.fact-box) I would add it to the code block itself. It'll basically save yourself some lines of code.
Now, because I see you're already using other code blocks in that index section, you can target it by its block ID:
#block-yui_3_17_2_1_1595352678571_3802 {
position: -webkit-sticky; //prefix for Safari
position: sticky;
top: 80px;
}
Then, you need to make the column holding that block as long as the one next to it, otherwise, there'll be no height to scroll through.
To achieve that, I suggest applying flexbox to the row holding both columns. That will make them both the height of the longest (i.e. the content side).
I wrapped this part inside a media query so that things can still stack on mobile as they do by default.
@media screen and (min-width: 640px) {
#bcg-content .sqs-row {
display: flex;
}
}
Lastly, if you look at the section container (the one with the id of #bcg-content shown in the screenshot) that one has its overflow set to hidden, therefore it's affecting the sticky behavior of the code block.
You can swap that for the default value:
#bcg-content {
overflow: visible;
}
Link to post
  • 0
On 7/24/2020 at 4:38 PM, AThompson_social said:

Here is the solution that a friend helped me out with. IT WORKS

I see what you're trying to do.
Position sticky is really cool but it can be very finicky sometimes.
There are three main factors that need to be present when using position sticky:
1. The direct parent container holding the sticky thing needs to be as long as the area you want the thing to scroll. In this case, that would be the whole column next to your text.
2. The top offset has to be declared, to tell your browser how far away from the top edge it should stick the element.
3. NONE of the parent/ancestor containers of the sticky element can have an overflow different to "visible". If one of them does, then the sticky element won't be able to use the viewport as reference to stick on scroll.
That being said, here's what I would do:
First, instead of adding position: sticky to the inner div you created (.fact-box) I would add it to the code block itself. It'll basically save yourself some lines of code.
Now, because I see you're already using other code blocks in that index section, you can target it by its block ID:
#block-yui_3_17_2_1_1595352678571_3802 {
position: -webkit-sticky; //prefix for Safari
position: sticky;
top: 80px;
}
Then, you need to make the column holding that block as long as the one next to it, otherwise, there'll be no height to scroll through.
To achieve that, I suggest applying flexbox to the row holding both columns. That will make them both the height of the longest (i.e. the content side).
I wrapped this part inside a media query so that things can still stack on mobile as they do by default.
@media screen and (min-width: 640px) {
#bcg-content .sqs-row {
display: flex;
}
}
Lastly, if you look at the section container (the one with the id of #bcg-content shown in the screenshot) that one has its overflow set to hidden, therefore it's affecting the sticky behavior of the code block.
You can swap that for the default value:
#bcg-content {
overflow: visible;
}

wait... I got lost after the first string of css code, how do you create a flexbox, and do you have to code everything in it?

S

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...