Hello friends, today we are going to discuss Sticky Header in LWC Salesforce. A sticky header is a menu or navigation bar that stays at the top of the page no matter where you scroll. We can say that the header will be fixed after some scrolling. In this way, we can easily access the main navigation bar or details bar without scrolling up. In Salesforce, we mostly use it to show records fields which we need to and also put action buttons.
Also, check this: Add Lightning Flow in Aura Component
Key Highlights :
- We can access the main details at any time, no matter where you scroll.
- We can make the detail card header sticky like a standard record page in salesforce.
- Easily access action buttons.
Code :
stickyLWCHeader.HTML :
<template>
<div class="top-container">
<h1>Scroll Down</h1>
<p>Scroll down to see the sticky effect.</p>
</div>
<div class="header myStickyHeader sticky" id="myHeader" style={stickyMargin}>
<div class="slds-page-header slds-page-header_record-home">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account">
<lightning-icon icon-name="standard:account" alternative-text="Account" title="Account"></lightning-icon>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Opportunity</span>
<span class="slds-page-header__title slds-truncate" title="Acme - 1,200 Widgets">Acme - 1,200 Widgets</span>
</h1>
</div>
</div>
</div>
</div>
</div>
<div class="slds-page-header__col-actions">
<div class="slds-page-header__controls">
<div class="slds-page-header__control">
<ul class="slds-button-group-list">
<li>
<button class="slds-button slds-button_neutral">Edit</button>
</li>
<li>
<button class="slds-button slds-button_neutral">Delete</button>
</li>
<li>
<button class="slds-button slds-button_neutral">Clone</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="slds-page-header__row slds-page-header__row_gutters">
<div class="slds-page-header__col-details">
<ul class="slds-page-header__detail-row" style="padding: 10px;">
<li class="slds-page-header__detail-block">
<div class="slds-text-title slds-truncate" title="Field 1">Field 1</div>
<div class="slds-truncate"
title="Description that demonstrates truncation with a long text field.">
Description that demonstrates truncation with a long text field.</div>
</li>
<li class="slds-page-header__detail-block">
<div class="slds-text-title slds-truncate" title="Field 2">Field 2</div>
<div class="slds-truncate" title="Hyperlink">
<a href="#">Hyperlink</a>
</div>
</li>
<li class="slds-page-header__detail-block">
<div class="slds-text-title slds-truncate" title="Field 3">Field 3</div>
<div class="slds-truncate" title="Description (2-line truncation—must use JS to truncate).">
Description
(2-line truncati...</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style={contentPadding}>
<lightning-card title="">
<lightning-record-form record-id="0016F00002Jk2YtQAJ" object-api-name="Account" layout-type="Full"
mode="view">
</lightning-record-form>
</lightning-card>
</div>
</template>
stickyLWCHeader.JS :
import { LightningElement } from 'lwc';
export default class StickyLWCHeader extends LightningElement {
stickyMargin;
contentPadding = 'padding-top:10px';
renderedCallback() {
try {
window.onscroll = () => {
let stickysection = this.template.querySelector('.myStickyHeader');
let sticky2 = stickysection.offsetTop;
if (window.pageYOffset > sticky2) {
stickysection.classList.add("slds-is-fixed");
this.stickyMargin = 'margin-top:90px';
this.contentPadding = 'padding-top:102px'
} else {
stickysection.classList.remove("slds-is-fixed");
this.stickyMargin = '';
this.contentPadding = 'padding-top:10px'
}
}
} catch (error) {
console.log('error =>', error);
}
}
}
stickyLWCHeader.CSS :
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
margin-bottom: 5px;
}
.sticky {
top: 0;
left: -1px;
right: 0px;
width: 100%;
z-index: 9899999999999;
}
.sticky + .content {
padding-top: 102px;
}
stickyLWCHeader.js-meta.xml :
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output :
Reference :
What’s your Reaction?
+1
2
+1
+1
+1
+1
+1
Total views : 1095458