Hello @Ankur Bawiskar
I am submitting a request from my employee center portal and i notice the Order Now button at right side of my catalog form. When I scroll the page down below to fill my catalog form my Order Now button widget(SC Catalog item-widget name) also been scrolled down till my catalog form page . I want to understand how that widget is scrolling down when i scroll down in my page.
In below image you can see position of order now button widget at top before scrolling down
Now after scrolling down the page my widget is also scrolling down along form
Can you please guide me on this how this widget scrolling action is taking place. I am checking on css and html code of widget but couldn't get it. Can you please share your inputs on it. Thanks in advance
The behavior you're describing, where the "Order Now" button scrolls along with the page, is typically achieved using a CSS property called 'position: fixed;' or 'position: sticky;'. These properties allow an element to be positioned in a specific way relative to the viewport, which means it can stay in the same place on the screen even when the page is scrolled.
Here's a brief explanation of both:
position : fixed;
- This CSS property is used to position an element relative to the browser window. It will not move when the page is scrolled, which means it will always stay in the same place on the screen.
- Example CSS:
.fixed-button {
position: fixed;
top: 100px; /* Distance from the top of the viewport */
right: 20px; /* Distance from the right of the viewport */
}
position: sticky;
- This property is a hybrid of relative and fixed positioning. The element is treated as position: relative until the page is scrolled to a certain point, at which it becomes fixed.
- Example CSS:
.sticky-button {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 100px; /* Trigger point for sticky behavior */
right: 20px;
}
Note that 'position: sticky;' will only work if the element's parent does not have an overflow value other than visible.
I tried to inspect the Order Now button widget by using the browser's developer tools by following the steps below
- Right-click on the "Order Now" button in your browser and select "Inspect" or "Inspect Element" from the context menu.
- Looked for the styles applied to the element in the Styles pane of the developer tools.
In CSS rules, I found that position: fixed is applied on the right side cart widget. Please refer the screenshot below
Please mark this response as correct or helpful if it assisted you with your question.
