Service Portal: position: sticky or something similar

[Fabricio4]

Hi!

So, I'm trying to use the "sticky" property in a CSS of a Service Portal Page, but it doesn't seem like it's supported by ServiceNow? Here's the effect (supported by most browsers) in question:

https://www.youtube.com/shorts/wdAkpswmnpo

So, I'm considering an alternative using javascript. But here's my question, how do I go around doing that if I can't manipulate the HTML of the page? And where would I put the code to work on that specific page? If I used an UI macro, where on the page would I call the macro? Only in a widget? I'd like to avoid call it by widget if possible, instead using the page itself.

Any other alternatives are very welcome.

Thanks!

[-O-]

You're most welcome and I appreciate marking the correct answer! 🙂

[Fabricio4]

So @-O- , I tried doing what I mentioned (a column inside a container) and it... sort of worked? Actually, it didn't work, but on the page editor it seems like it's working. I've recorded a video to show:

https://youtu.be/o2yHfXg8S9c

Same behavior no matter the browser I use. 

I thought about your suggestion of embedding all of the widgets of the page inside a master widget, but that would probably be more trouble than it's worth for a simple effect.

[-O-]

Perhaps the portal defines additional styles that make it not work in "real life"?

[Sid564]

While ServiceNow doesn't have native support for the position: sticky property within Service Portal pages, here are effective workarounds to achieve a similar sticky behavior:

1. Using position: fixed with Careful Positioning:

Apply position: fixed to the element you want to stick.
Adjust top, left, right, or bottom properties to position it within the viewport.
Important: Use z-index to control stacking order and prevent overlapping with other content.
Considerations:
Fixed elements can cover other content when scrolling.
Requires precise positioning to avoid unwanted behavior.
Example:

CSS
.sticky-element {
position: fixed;
top: 10px; /* Adjust as needed */
left: 0;
width: 200px;
z-index: 10; /* Ensure it's above other content */
}
2. Using JavaScript for Dynamic Stickiness:

Implement JavaScript code to track scroll position and dynamically adjust the element's position when a certain threshold is reached.
This provides more control and adaptability.
Example:

JavaScript
window.addEventListener('scroll', function() {
const stickyElement = document.querySelector('.sticky-element');
const scrollPosition = window.scrollY;

if (scrollPosition >= 100) { // Adjust threshold as needed
stickyElement.style.position = 'fixed';
stickyElement.style.top = '0';
} else {
stickyElement.style.position = 'static'; // Or 'relative', depending on your layout
}
});
3. Utilizing Theme Options for Fixed Headers/Footers:

If you need a fixed header or footer, explore theme options within ServiceNow.
Some themes offer built-in settings for fixed headers and footers.
4. Exploring Third-Party Libraries (If Allowed):

Consider using third-party sticky element libraries if your organization permits them.
Research compatibility and potential performance implications.

[-O-]

While ServiceNow doesn't have native support for the position: sticky property...

Support for position sticky is not up to ServiceNow or Portal.