Enable option to "sticky" the sidebar within Olivero

Having a sticky block sometimes makes sense, so I think that would be great to have as an option. But like you write, probably optional and configurable via a theme-setting. Can it be per block, or would it have to be on-or-off for all blocks?

It looks great, and works just as expected, thanks!

A problem with position: sticky is it doesn't take the amount of sidebar content into account.

Consider this situation:

• The main content of the page is very long (a front page with 10 blog posts, or a forum post with lots of comments)
• The side bar has just enough content to make it slightly taller than the viewport height.

In this case, you have to scroll to the end of a very long page, to see the end of the short sidebar. Without the sticky positioning, you'll only have to scroll a short distance to see the end of the sidebar.

The GIF in the issue summary doesn't show the problem, because the sidebar content is slightly shorter than the viewport. Try making the browser window height about 100px shorter to see the problem (or add a couple more sentences in the sidebar content).

Making it a configurable theme setting mitigates the problem somewhat, but it then permissions get in the way. The approach falls down where a content editor has permission to manage blocks (or layout builder?) but doesn't have permission to change theme setting. A site builder can't anticipate how much content a content manager will put in the sidebar.

There's a potential accessibility issue with using position: sticky on a sidebar. Watch the demo GIF in the issue summary carefully...

• When you start scrolling, the main content and sidebar move together at the same speed. But soon the sticky position kicks in, and the sidebar suddenly comes to a halt, while the main content carries on moving.
• When you reach the end of the main content (and arrive at the dark footer region) the sticky position disengages, and the sidebar suddenly starts moving again, at the same speed as the main content.
• So there are 2 events where the main content and sidebar change velocity with respect to each other.

Scott O' Hara suspects that "such behaviour could be considered a form of parallax scrolling". So he avoids using the sticky position when the prefers-reduced-motion media feature is in play. I think this is an interesting situation, and I think it's worth putting this in for safety. The theme settings form could briefly mention this in a #description, in case any site builders think it isn't working.

Hi!

First of all thanks for all the work!

This is exactly what I want and I would like to help test it. I want to use this for social links which I want to stay visible while scrolling down. The patch is not applying to my codebase with composer (I use "cweagans/composer-patches": "^1.6"). I use drupal/core and not drupal/recommended-project (don't know if this is relevant). My drupal codebase is in a web folder. My composer.json one level higher.

"patches": {
          "drupal/core": {
            "Sticky social bar": "https://www.drupal.org/files/issues/2020-10-05/3174774-5.patch"
          }
        }

It seems that composer can't find the files (because its not looking in the olivero theme dir). This is the output of the first bit:

Downloading https://www.drupal.org/files/issues/2020-10-05/3174774-5.patch
patch '-p1' --no-backup-if-mismatch -d 'web/core' < '/tmp/61f787288dd7b.patch'
Executing command (CWD): patch '-p1' --no-backup-if-mismatch -d 'web/core' < '/tmp/61f787288dd7b.patch'
can't find file to patch at input line 5
Perhaps you used the wrong -p or --strip option?
The text leading up to this was:
--------------------------
|diff --git a/config/install/olivero.settings.yml b/config/install/olivero.settings.yml
|index 11f0599..bae1e24 100644
|--- a/config/install/olivero.settings.yml
|+++ b/config/install/olivero.settings.yml
--------------------------
File to patch: 
Skip this patch? [y] 
Skipping patch.

Could not apply patch! Skipping. The error was: Cannot apply patch https://www.drupal.org/files/issues/2020-10-05/3174774-5.patch

I guess I do something wrong. I googled but could not find anything that helps me solve this.

I also tried to replace drupal/core with drupal/olivero but then composer tells me there is nothing to install, update or remove.

In the meantime, I use CSS which also works pretty well (I just add this in case somebody looking for a solution reads this).

@media (min-width: 75rem) {
  .social-sharing-buttons svg {
    transform: rotate(90deg);
  }
  .social-bar__inner {
    position: fixed;
    /* top: 30px; */
  }
}

I agree @jazzper, @mherchel's suggestion about adding a sidebar "sticky" option is great, and his patch works perfectly, so I also hope it can get implemented in Drupal core at some point.

The original patch has to be applied from inside the theme folder, so for it to work with Composer I have re-rolled the patch for Drupal 9.4 via the newish Gitlab integration. To try the patch, use one of these options:

1. Click the "View live preview via Tugboat" link under the Merge Request above
2. Use https://github.com/lando/drupal-contributions/#testing-drupal-patches together with the "plain diff" URL above
3. Patch via Composer, see https://www.drupal.org/project/drupal/issues/3214072#summary-patching for an example

PS. The test fails, I don't know why, but the feature works, as can be seen here:

Hi @ressa,

Thanks for your response! Maybe I'm missing something or maybe it's because the test doesn't pass but I don't see a re-rolled patch.

I thought the sticky sidebar was for the social bar on the left. But now I see it's the right sidebar. Still, a nice feature and I would like to have it on my website and help with testing.

It's because in the new Gitlab integration, patches are at the top, together with link to the issue fork, the branch, Merge Request, etc. :)

And you're right, nice catch: With this patch only the right hand side block is stickied, so it needs work if also the social bar on the left should stick :)

Thanks for the explanation!

I applied the patch and it's working great! I use it for a Table of content views block showing all the h2's of my paragraphs. I configured them as anchor links so that people can go to the relevant section of my content by clicking them.

One thing that could be improved IMHO is a way for the main menu not to overlap with the block when the menu is expanded. Or maybe that by navigating to another page the menu doesn't stay expanded. Of course, a user can close the menu by clicking on the X but not every user might realize this.

Anyway, it's working really well!

@mherchel
Thanks! I was looking for something like that for my EVS subtheme of Olivero
I adapted the patch to my EVS subtheme of Olivero
Step 1. add

#https://www.drupal.org/project/drupal/issues/3174774
#https://www.drupal.org/files/issues/2020-10-05/3174774-5.patch
function evs_preprocess_region(&$variables) {
  if ($variables['region'] === 'sidebar') {
    $variables['attributes']['class'][] = 'is-sticky';
  }
}

to evs.theme
Step 2. add

/* sticky code start */
@supports (position: sticky) {
.region--sidebar.is-sticky {
	position: sticky;
	top: 36px;
	-ms-grid-row-align: start;
	align-self: start
}
}
@supports (position: sticky) {
	.toolbar-vertical.toolbar-fixed .region--sidebar.is-sticky, .toolbar-horizontal.toolbar-fixed .region--sidebar.is-sticky {
	top: 75px;
	}
	.toolbar-vertical.toolbar-fixed .region--sidebar.is-sticky, .toolbar-horizontal.toolbar-fixed .region--sidebar.is-sticky {
	top: 75px;
	}
}
:root {--sticky-sidebar-offset: var(--sp2);}
@media (--lg) {
	&.is-sticky {
		@supports (position: sticky) {
			position: sticky;
			inset-block-start: var(--sticky-sidebar-offset);
			align-self: start;
		}
	}
}

@supports (position: sticky) {
	/* Toolbar is fixed, and tray is either vertical or closed and horizontal. */
	.toolbar-vertical.toolbar-fixed, .toolbar-horizontal.toolbar-fixed {
		& .region--sidebar.is-sticky {
			inset-block-start: calc(var(--toolbar-height) + var(--sticky-sidebar-offset));
		}
	}
	/* Toolbar is fixed, and tray is open and horizontal. */
	.toolbar-horizontal.toolbar-fixed.toolbar-tray-open {
		& .region--sidebar.is-sticky {
			inset-block-start: calc(var(--toolbar-tray-height) + var(--toolbar-height) + var(--sticky-sidebar-offset));
		}
	}
}
/* sticky code end */

to style.css

You can see it at EV stories.

Tagging for