[Resolved] Add floating element without sidebar

[Shivam]

Hey, i wanted to add floating element something like this (click here) within my blog post. Check the example site here. They don’t have any sidebar still they have added a table of content which floats in sidebar area..

[David]

Hi there,

they are actually using a sidebar its just a different HTML structure.
In GP you would do the following –

1. Enable the right sidebar and add your widget within.
2. Set the Sidebar width you require eg. 20% and remove the padding from sidebar if necessary.
3. Add this CSS:

@media(min-width: 1024px) {
  .right-sidebar .site-content .content-area {
    width: 60%; /* Width of content minus width of sidebar x 2 */
    margin-left: 20%; /* width of sidebar */
  }
}

4. Then to make the sidebar sticky you would add this CSS:

@media(min-width: 769px) {
  #right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 60px; /* Adjust sticky top position */
  }
}

[Shivam]

David, i have rechecked their design they are not using sidebar, Plus i can’t use sidebar on my blog post since i have few full width background block in my blog post.

[David]

Not that it matters but it is a sidebar that site uses:

https://www.screencast.com/t/lGugvfoeWFh

As i said the HTML Structure is different.

If you’re using a Sidebar already – then how would you expect to achieve that layout ?

A link to your site may be help explain.

[Shivam]

Here is my website link, is there any way to achieve that thing on my blog? I really wanted something like that…

[Ying]

Hi there,

Just checked your site, but like David said, you’ll need a sidebar layout to achieve what you are looking for.

It can be done without a sidebar if you just want it to be fixed position instead of sticky position.

[Shivam]

Ok fixed will also work fine for me, since I can’t enable the sidebar because of full-width background blocks.

[Ying]

1. You can create the content using a block element.
https://docs.generatepress.com/article/block-element-archive-navigation/

2. Give the container an additional CSS class, for example floating-content.
https://www.screencast.com/t/tAOVcyFpx7bP

3. Choose hook as block type, choose generate_after_content as hook.

4. Choose posts > all posts as location in display rule.

5. Add this CSS for tablet and desktop. In mobile view, it goes to the end of the content.

/*feel free to adjust numbers*/
@media (min-width: 769px) {
    .floating-content {
        position: fixed;
        right:10%;
        top: 30%;
    } 
}

[Shivam]

Hi Ying, everything worked perfectly, the only problem now i am facing is not able to control is the starting and endpoint of the fixed elements.

For example – This is the post where i have used the fixed element as per your instruction.

I want it to start from the step #1 section (HTML anchor is “step_1”) and stop it as soon as the post end (before author bio).

Is there any way to control it?

[Shivam]

any update?

[Elvin]

Hi there,

Can you keep Ying’s block, add height: 100%; to the .floating-content CSS, and let us check?

we’ll most likely have to add:

.inside-article{
position: relative;
}

.floating-content > * {
position: sticky;
top: 0;
}

But I can’t be sure until I see the block actually added to the post page.

Let us know.

[Shivam]

Hey Elvin, it didn’t work.. Here is the page link – https://www.staging2.nerdblogging.com/schema-markup/

Please have a look at it.

[David]

Hi there,

the only way for that to work is to use Javascript – which would require custom development – unfortunately its not something we can provide.

[Shivam]

It is not possible to control the starting and ending point of a fixed element with CSS?

[David]

No. postiion: fixed; is always relative to the browser viewport. It requires JS to hide/show the element when a certain event occurs, such as scroll position… but as your content may vary in size that position is unknown. You also have to consider what happens if the user resizes they’re browser as a fixed element will overlap the content….

With the current markup of your site theres no simple way to do that.

[Author]

Posts