[5.2 ]#44636 add scroll-margin-top if sticky top is used

[hans2103]

Pull Request for Issue 44636 .

Summary of Changes

This PR has a css change. It will apply a scroll-margin-top when sticky header is used.
The value of scroll-margin-top is set by custom property --cassiopeia-scroll-margin-top with a fallback to 10rem. Because custom property is used it can be set using javascript too. This might be useful when the height of the header is unknown. Out of scope for this PR.

When header in your custom Cassiopea template is larger you can override --cassiopeia-scroll-margin-top to another value in user.css or use javascript to set it in the style element.

Testing Instructions

• Joomla 5.2-dev with blog sample data
• Adjust content item "Your Modules" and add an anchor. (I've set it next to "Your site")
• Add a menu item type = url referring to #anchor. Add it to Menu Blog
• Refresh homepage and notice new menu item... click on it and see where the page takes you
• Apply PR and run npm ci to compile new css. (or something similar... css needs to be recompiled)
• Refresh homepage and notice new menu item... click on it and see where the page takes you

Actual result BEFORE applying this Pull Request

My set anchor position next to Your site is hidden behind the sticky header.

Expected result AFTER applying this Pull Request

My set anchor position next to Your site is visible below the sticky header.

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[fgsw]

I have tested this item ✅ successfully on 18a850a

Used 5.2.2 and Prebuilt Update_Package.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/44679.}