diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
index ee67c5e58c8..52e06ea1faa 100644
--- a/packages/terra-core-docs/CHANGELOG.md
+++ b/packages/terra-core-docs/CHANGELOG.md
@@ -2,6 +2,9 @@
## Unreleased
+* Added
+ * Added test to `terra-section-header` for the sticky section header title.
+
## 1.58.0 - (February 20, 2024)
* Changed
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/section-header/StickyTitleSectionHeader.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/section-header/StickyTitleSectionHeader.test.jsx
new file mode 100644
index 00000000000..d4c2bd5ebdb
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/test/section-header/StickyTitleSectionHeader.test.jsx
@@ -0,0 +1,29 @@
+/* eslint-disable react/forbid-dom-props */
+import React from 'react';
+import SectionHeader from 'terra-section-header';
+
+export default () => (
+
+
+ {}}
+ />
+
+ {}}
+ />
+
+
+
+
+);
diff --git a/packages/terra-section-header/CHANGELOG.md b/packages/terra-section-header/CHANGELOG.md
index ac6471a6978..afce86cd1d8 100644
--- a/packages/terra-section-header/CHANGELOG.md
+++ b/packages/terra-section-header/CHANGELOG.md
@@ -2,6 +2,9 @@
## Unreleased
+* Changed
+ * Allow the title of the `terra-section-header` to be sticky.
+
## 2.66.0 - (February 15, 2024)
* Changed
diff --git a/packages/terra-section-header/src/SectionHeader.jsx b/packages/terra-section-header/src/SectionHeader.jsx
index fbddbf6586a..a87f6865357 100644
--- a/packages/terra-section-header/src/SectionHeader.jsx
+++ b/packages/terra-section-header/src/SectionHeader.jsx
@@ -166,7 +166,7 @@ class SectionHeader extends React.Component {
return (
-
+
{headerText}}
diff --git a/packages/terra-section-header/src/SectionHeader.module.scss b/packages/terra-section-header/src/SectionHeader.module.scss
index 83678c2d3d4..063019a6c2b 100644
--- a/packages/terra-section-header/src/SectionHeader.module.scss
+++ b/packages/terra-section-header/src/SectionHeader.module.scss
@@ -156,5 +156,12 @@
&.title-fixed {
position: absolute;
}
+
+ // Make the section header title sticky
+ &.title-sticky {
+ position: sticky;
+ left: 12px;
+ width: auto;
+ }
}
}
diff --git a/packages/terra-section-header/tests/jest/SectionHeader.test.jsx b/packages/terra-section-header/tests/jest/SectionHeader.test.jsx
index c7ba3c08d52..efe14e315be 100644
--- a/packages/terra-section-header/tests/jest/SectionHeader.test.jsx
+++ b/packages/terra-section-header/tests/jest/SectionHeader.test.jsx
@@ -147,4 +147,17 @@ describe('SectionHeader', () => {
const sectionHeader = wrapper.find('.arrange-wrapper.title-fixed').at(0);
expect(sectionHeader).toHaveLength(1);
});
+
+ it('verifies that section header with a sticky title has appropriate classes', () => {
+ const wrapper = enzyme.shallow(
+ ,
+ );
+
+ const sectionHeader = wrapper.find('.arrange-wrapper.title-sticky').at(0);
+ expect(sectionHeader).toHaveLength(1);
+ });
});