I have two sections in an LWC and the section 1 contains lot of data hence that section scrolls. The section 2 is a fixed size div which has inner scrolling. Now I need the div on the right side(the smaller div with fixed height) to be affixed even when we scroll for data. Image 1 shows the div's enter image description here

In the below image is when I scroll to the bottom. The smaller div's position is fixed. I have tried to use various "position" styles but none of them helped. I want the smaller div to be affixed so that the user wont be scrolling back to the top to access the data. enter image description here

The playground url is : https://developer.salesforce.com/docs/component-library/tools/playground/D9EG6u9FA/5/edit .

  • you want the right div to be fixed when scrolling?
    – User6670
    Mar 24 '20 at 6:18
  • Yes. That’s correct
    – samdev
    Mar 24 '20 at 12:40

you can do that by adding following css to the top div

margin: 0;
    padding: 0;
    width: 100%;
    top: 0;
    z-index: 101;
    position: -webkit-sticky;
    position: sticky;

here is a playground https://developer.salesforce.com/docs/component-library/tools/playground/D9EG6u9FA/7/edit

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.