Create Fixed HTML Div Tag On Scroll

Introduction

In Joget, you can enhance the user experience by creating a fixed HTML <div> tag that stays in place when the page content is scrolled. This is particularly useful for keeping important elements like headers, progress bars, or action buttons visible at all times. In this article, you'll learn how to implement this feature in a Joget application using a sample Request Form Approval Process.

How does it work?

To make an HTML <div> tag stays fixed during the scroll; you will apply custom CSS to the desired elements. This involves identifying the relevant HTML classes or IDs using developer tools and then modifying the CSS to make those elements sticky. The steps below guide you through the process.

Steps to Implement:

1.  Open the desired app or download the Simple Request Approval app for demonstration.
2. Open App runtime. In this case, you should run the Fixed HTML Tag on the Scroll app in run time. 
3. Click Approval from the left menu panel to display a list of the approval tasks.
4. Then, click the View to view the task.
   
5. Right-click the Request Form Approval Process - Approval title and select Inspect to open the developer tools.
   
   
6. In the developer console, find and note the name of the div class. For example, the class might be viewForm-body-header.
   
   
7. In the UI Builder, go to Settings > Advanced > Custom CSS and enter the following CSS to make the header sticky.
   

   .viewForm-body-header {
       font-size: 16px;
       font-weight: bold;
       padding: 10px 0px;
       position: sticky;
       top: 65px;
       z-index: 9999;
       border-radius: 5px;
    
   }

   

8. Repeat the inspection process for the Progress Bar element. Identify the div ID, such as process_status_div.
   
   
9. In the same Custom CSS section, enter the following code to make the progress bar sticky:
   

   #process_status_div {
       text-align: right;
       position: sticky;
       top: 108px;
       z-index: 9999;
   }
    
   .progress_bar{
       border-radius: 5px;
    
   }

   Tip
   You can customize the appearance of the HTML tag, such as adding a background color to make it more presentable.
   
10. After entering the CSS, click Save to apply the changes.
    
11. Preview the application in runtime to see the fixed elements in action.

Expected outcome

Once implemented, the Request Form Approval Process - Approval title and the Progress Bar will remain fixed at the top of the screen as you scroll through the page content. This ensures that important elements are always visible to the user, enhancing the usability of your Joget application.

Download sample app