<div class="content-section ">
<div class="content-section__title text-button">Section 1</div>
<div class="content-section__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus feugiat mi, eu condimentum nisi imperdiet et. Fusce eleifend diam justo, tristique rutrum purus varius in. Duis sit amet justo aliquam, accumsan sapien non, rhoncus neque. Curabitur fringilla lacus vel lacus tempor, vitae convallis est luctus. Maecenas ut turpis gravida, ullamcorper urna sit amet, tempor massa. Suspendisse commodo diam nec tempor tristique. Sed consequat efficitur consectetur. Ut nec convallis lacus, sit amet bibendum nibh. Etiam eleifend at libero commodo volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, felis at rutrum commodo, orci justo tincidunt nisl, posuere faucibus odio risus vel lacus. Nullam et pulvinar nisi, vel ullamcorper ex. Praesent ut placerat dolor.
Donec massa ex, placerat ut suscipit non, consequat non velit. Donec id tortor vel diam porttitor facilisis. Pellentesque sed pharetra nulla. Proin nec odio nisi. Sed laoreet lacus vitae nisl convallis, id congue ipsum vehicula. Maecenas finibus tincidunt felis et lobortis. Nam suscipit aliquam orci, vitae sodales mi dictum id. Nunc eu velit fringilla lorem tincidunt tempor. Duis est neque, molestie in dictum at, interdum interdum nulla. Aenean nec justo non libero ultrices consequat mollis vitae ligula. Morbi massa eros, rutrum ac tortor sit amet, sodales malesuada ante. Cras molestie libero id lectus laoreet gravida. Proin iaculis ligula vitae augue bibendum, et finibus nunc auctor.
Etiam viverra, eros pharetra varius vulputate, enim mauris mattis turpis, quis dapibus libero nisi sit amet arcu. Pellentesque eget placerat augue. Vivamus consectetur tortor vel nulla facilisis, a aliquam dolor varius. Nulla facilisi. Morbi vel quam non sem fringilla ullamcorper. Ut sed ipsum quis nibh hendrerit dictum. Vestibulum tempor, urna a eleifend malesuada, augue enim porttitor mi, et porta diam odio at justo. Praesent maximus dictum ipsum, eu sagittis velit volutpat eget. Quisque tempor tellus vel ornare finibus. Nullam tincidunt nunc sed urna aliquam, vel interdum metus vulputate.
</div>
</div>
{% set titleStyle = 'content-section--lineless' in modifier ? '' : 'text-button' %}
<div class="content-section {{ modifier }} {{ class }}">
{% if data.title %}
<div class="content-section__title {{ titleStyle }}">{{ data.title }}</div>
{% endif %}
{% if data.content %}
<div class="content-section__content">
{{ data.content }}
</div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Section 1",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus feugiat mi, eu condimentum nisi imperdiet et. Fusce eleifend diam justo, tristique rutrum purus varius in. Duis sit amet justo aliquam, accumsan sapien non, rhoncus neque. Curabitur fringilla lacus vel lacus tempor, vitae convallis est luctus. Maecenas ut turpis gravida, ullamcorper urna sit amet, tempor massa. Suspendisse commodo diam nec tempor tristique. Sed consequat efficitur consectetur. Ut nec convallis lacus, sit amet bibendum nibh. Etiam eleifend at libero commodo volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, felis at rutrum commodo, orci justo tincidunt nisl, posuere faucibus odio risus vel lacus. Nullam et pulvinar nisi, vel ullamcorper ex. Praesent ut placerat dolor.\n\nDonec massa ex, placerat ut suscipit non, consequat non velit. Donec id tortor vel diam porttitor facilisis. Pellentesque sed pharetra nulla. Proin nec odio nisi. Sed laoreet lacus vitae nisl convallis, id congue ipsum vehicula. Maecenas finibus tincidunt felis et lobortis. Nam suscipit aliquam orci, vitae sodales mi dictum id. Nunc eu velit fringilla lorem tincidunt tempor. Duis est neque, molestie in dictum at, interdum interdum nulla. Aenean nec justo non libero ultrices consequat mollis vitae ligula. Morbi massa eros, rutrum ac tortor sit amet, sodales malesuada ante. Cras molestie libero id lectus laoreet gravida. Proin iaculis ligula vitae augue bibendum, et finibus nunc auctor.\n\nEtiam viverra, eros pharetra varius vulputate, enim mauris mattis turpis, quis dapibus libero nisi sit amet arcu. Pellentesque eget placerat augue. Vivamus consectetur tortor vel nulla facilisis, a aliquam dolor varius. Nulla facilisi. Morbi vel quam non sem fringilla ullamcorper. Ut sed ipsum quis nibh hendrerit dictum. Vestibulum tempor, urna a eleifend malesuada, augue enim porttitor mi, et porta diam odio at justo. Praesent maximus dictum ipsum, eu sagittis velit volutpat eget. Quisque tempor tellus vel ornare finibus. Nullam tincidunt nunc sed urna aliquam, vel interdum metus vulputate."
}
}
.content-section {
display: flex;
flex-direction: column;
transition: $transition-duration $transition-easing;
transition-property: box-shadow;
&.content-section--outset {
box-shadow: none;
@include bp(sm-min) {
@include gridcol(margin-left, -6.35, $grid-cols-md);
}
}
}
.content-section__title {
border-top: 1px solid;
border-bottom: 1px solid;
background-color: var(--color-background);
padding: 7px 16px;
z-index: map_get($zindex, contentSectionTitle);
transition: $transition-duration $transition-easing;
transition-property: box-shadow, background-color;
@include bp(sm-min) {
padding: 14px 32px;
}
.content-section--outset > & {
text-transform: uppercase;
border-top: none;
border-bottom: none;
z-index: map_get($zindex, default);
@include bp(sm-min) {
padding: 32px 0 0 90px;
}
}
.content-section--visible-sm > & {
display: none;
@include bp(sm-min) {
display: block;
}
}
.content-section--sticky-z > & {
position: sticky; /* stylelint-disable-line plugin/no-unsupported-browser-features */
z-index: map_get($zindex, contentSectionTitle);
@include bp(sm-min) {
z-index: map_get($zindex, default);
}
}
.content-section--lineless > & {
box-shadow: none;
}
.content-section--sticky > & {
position: sticky; /* stylelint-disable-line plugin/no-unsupported-browser-features */
z-index: map_get($zindex, contentSectionTitle);
}
}
.content-section__content {
flex-grow: 1;
transition: $transition-duration $transition-easing;
transition-property: background-color;
.content-section--padding > & {
padding: 24px 17px 38px 15px;
@include bp(sm-min) {
padding: 40px 32px 64px;
}
}
.content-section--max-width > & {
max-width: 1200px;
}
.content-section--outset > & {
box-shadow: none;
@include bp(sm-min) {
box-shadow: 0 1px 0 0 var(--color-brand);
}
}
.content-section--inset > & {
display: flow-root;
@include bp(sm-min) {
box-shadow: -1px 0 0 0 var(--color-brand);
transition: $transition-duration $transition-easing;
transition-property: background-color, box-shadow;
@include gridcol(margin-left, 5, $grid-cols-md);
}
}
}
import './content-section.scss';
import Component from '@component';
interface IContentSectionSettings {
titleClass: string;
stickyClass: string;
stickyIndexClass: string;
}
export default class ContentSection extends Component {
static initSelector: string = '.content-section';
settings: IContentSectionSettings;
title: JQuery;
borderThreshold: number = 0.01;
constructor(element: HTMLElement) {
super(element);
this.settings = {
stickyClass: 'content-section--sticky',
stickyIndexClass: 'content-section--sticky-z',
titleClass: 'content-section__title',
};
this.title = this.element.find('.' + this.settings.titleClass);
this.init();
}
init(): void {
if (this.element.hasClass(this.settings.stickyClass) || this.element.hasClass(this.settings.stickyIndexClass)) {
window.addEventListener('scroll', this.scrollHandler.bind(this));
this.scrollHandler();
}
}
scrollHandler(): void {
const boxSize: DOMRect = this.element[0].getBoundingClientRect();
const titleSize: DOMRect = this.title[0].getBoundingClientRect();
const percent: number = Math.min(Math.max(titleSize.top / (boxSize.top + boxSize.height - titleSize.height), 0), 1);
this.title.css('border-bottom', percent > 1 - this.borderThreshold ? 'none' : '');
}
}
<div class="content-section content-section--sticky ">
<div class="content-section__title text-button">Section 1</div>
<div class="content-section__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus feugiat mi, eu condimentum nisi imperdiet et. Fusce eleifend diam justo, tristique rutrum purus varius in. Duis sit amet justo aliquam, accumsan sapien non, rhoncus neque. Curabitur fringilla lacus vel lacus tempor, vitae convallis est luctus. Maecenas ut turpis gravida, ullamcorper urna sit amet, tempor massa. Suspendisse commodo diam nec tempor tristique. Sed consequat efficitur consectetur. Ut nec convallis lacus, sit amet bibendum nibh. Etiam eleifend at libero commodo volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, felis at rutrum commodo, orci justo tincidunt nisl, posuere faucibus odio risus vel lacus. Nullam et pulvinar nisi, vel ullamcorper ex. Praesent ut placerat dolor.
Donec massa ex, placerat ut suscipit non, consequat non velit. Donec id tortor vel diam porttitor facilisis. Pellentesque sed pharetra nulla. Proin nec odio nisi. Sed laoreet lacus vitae nisl convallis, id congue ipsum vehicula. Maecenas finibus tincidunt felis et lobortis. Nam suscipit aliquam orci, vitae sodales mi dictum id. Nunc eu velit fringilla lorem tincidunt tempor. Duis est neque, molestie in dictum at, interdum interdum nulla. Aenean nec justo non libero ultrices consequat mollis vitae ligula. Morbi massa eros, rutrum ac tortor sit amet, sodales malesuada ante. Cras molestie libero id lectus laoreet gravida. Proin iaculis ligula vitae augue bibendum, et finibus nunc auctor.
Etiam viverra, eros pharetra varius vulputate, enim mauris mattis turpis, quis dapibus libero nisi sit amet arcu. Pellentesque eget placerat augue. Vivamus consectetur tortor vel nulla facilisis, a aliquam dolor varius. Nulla facilisi. Morbi vel quam non sem fringilla ullamcorper. Ut sed ipsum quis nibh hendrerit dictum. Vestibulum tempor, urna a eleifend malesuada, augue enim porttitor mi, et porta diam odio at justo. Praesent maximus dictum ipsum, eu sagittis velit volutpat eget. Quisque tempor tellus vel ornare finibus. Nullam tincidunt nunc sed urna aliquam, vel interdum metus vulputate.
</div>
</div>
{% set titleStyle = 'content-section--lineless' in modifier ? '' : 'text-button' %}
<div class="content-section {{ modifier }} {{ class }}">
{% if data.title %}
<div class="content-section__title {{ titleStyle }}">{{ data.title }}</div>
{% endif %}
{% if data.content %}
<div class="content-section__content">
{{ data.content }}
</div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Section 1",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus feugiat mi, eu condimentum nisi imperdiet et. Fusce eleifend diam justo, tristique rutrum purus varius in. Duis sit amet justo aliquam, accumsan sapien non, rhoncus neque. Curabitur fringilla lacus vel lacus tempor, vitae convallis est luctus. Maecenas ut turpis gravida, ullamcorper urna sit amet, tempor massa. Suspendisse commodo diam nec tempor tristique. Sed consequat efficitur consectetur. Ut nec convallis lacus, sit amet bibendum nibh. Etiam eleifend at libero commodo volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, felis at rutrum commodo, orci justo tincidunt nisl, posuere faucibus odio risus vel lacus. Nullam et pulvinar nisi, vel ullamcorper ex. Praesent ut placerat dolor.\n\nDonec massa ex, placerat ut suscipit non, consequat non velit. Donec id tortor vel diam porttitor facilisis. Pellentesque sed pharetra nulla. Proin nec odio nisi. Sed laoreet lacus vitae nisl convallis, id congue ipsum vehicula. Maecenas finibus tincidunt felis et lobortis. Nam suscipit aliquam orci, vitae sodales mi dictum id. Nunc eu velit fringilla lorem tincidunt tempor. Duis est neque, molestie in dictum at, interdum interdum nulla. Aenean nec justo non libero ultrices consequat mollis vitae ligula. Morbi massa eros, rutrum ac tortor sit amet, sodales malesuada ante. Cras molestie libero id lectus laoreet gravida. Proin iaculis ligula vitae augue bibendum, et finibus nunc auctor.\n\nEtiam viverra, eros pharetra varius vulputate, enim mauris mattis turpis, quis dapibus libero nisi sit amet arcu. Pellentesque eget placerat augue. Vivamus consectetur tortor vel nulla facilisis, a aliquam dolor varius. Nulla facilisi. Morbi vel quam non sem fringilla ullamcorper. Ut sed ipsum quis nibh hendrerit dictum. Vestibulum tempor, urna a eleifend malesuada, augue enim porttitor mi, et porta diam odio at justo. Praesent maximus dictum ipsum, eu sagittis velit volutpat eget. Quisque tempor tellus vel ornare finibus. Nullam tincidunt nunc sed urna aliquam, vel interdum metus vulputate."
},
"modifier": "content-section--sticky"
}
.content-section {
display: flex;
flex-direction: column;
transition: $transition-duration $transition-easing;
transition-property: box-shadow;
&.content-section--outset {
box-shadow: none;
@include bp(sm-min) {
@include gridcol(margin-left, -6.35, $grid-cols-md);
}
}
}
.content-section__title {
border-top: 1px solid;
border-bottom: 1px solid;
background-color: var(--color-background);
padding: 7px 16px;
z-index: map_get($zindex, contentSectionTitle);
transition: $transition-duration $transition-easing;
transition-property: box-shadow, background-color;
@include bp(sm-min) {
padding: 14px 32px;
}
.content-section--outset > & {
text-transform: uppercase;
border-top: none;
border-bottom: none;
z-index: map_get($zindex, default);
@include bp(sm-min) {
padding: 32px 0 0 90px;
}
}
.content-section--visible-sm > & {
display: none;
@include bp(sm-min) {
display: block;
}
}
.content-section--sticky-z > & {
position: sticky; /* stylelint-disable-line plugin/no-unsupported-browser-features */
z-index: map_get($zindex, contentSectionTitle);
@include bp(sm-min) {
z-index: map_get($zindex, default);
}
}
.content-section--lineless > & {
box-shadow: none;
}
.content-section--sticky > & {
position: sticky; /* stylelint-disable-line plugin/no-unsupported-browser-features */
z-index: map_get($zindex, contentSectionTitle);
}
}
.content-section__content {
flex-grow: 1;
transition: $transition-duration $transition-easing;
transition-property: background-color;
.content-section--padding > & {
padding: 24px 17px 38px 15px;
@include bp(sm-min) {
padding: 40px 32px 64px;
}
}
.content-section--max-width > & {
max-width: 1200px;
}
.content-section--outset > & {
box-shadow: none;
@include bp(sm-min) {
box-shadow: 0 1px 0 0 var(--color-brand);
}
}
.content-section--inset > & {
display: flow-root;
@include bp(sm-min) {
box-shadow: -1px 0 0 0 var(--color-brand);
transition: $transition-duration $transition-easing;
transition-property: background-color, box-shadow;
@include gridcol(margin-left, 5, $grid-cols-md);
}
}
}
import './content-section.scss';
import Component from '@component';
interface IContentSectionSettings {
titleClass: string;
stickyClass: string;
stickyIndexClass: string;
}
export default class ContentSection extends Component {
static initSelector: string = '.content-section';
settings: IContentSectionSettings;
title: JQuery;
borderThreshold: number = 0.01;
constructor(element: HTMLElement) {
super(element);
this.settings = {
stickyClass: 'content-section--sticky',
stickyIndexClass: 'content-section--sticky-z',
titleClass: 'content-section__title',
};
this.title = this.element.find('.' + this.settings.titleClass);
this.init();
}
init(): void {
if (this.element.hasClass(this.settings.stickyClass) || this.element.hasClass(this.settings.stickyIndexClass)) {
window.addEventListener('scroll', this.scrollHandler.bind(this));
this.scrollHandler();
}
}
scrollHandler(): void {
const boxSize: DOMRect = this.element[0].getBoundingClientRect();
const titleSize: DOMRect = this.title[0].getBoundingClientRect();
const percent: number = Math.min(Math.max(titleSize.top / (boxSize.top + boxSize.height - titleSize.height), 0), 1);
this.title.css('border-bottom', percent > 1 - this.borderThreshold ? 'none' : '');
}
}
<div class="content-section content-section--inset ">
<div class="content-section__title text-button">Section 1</div>
<div class="content-section__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus feugiat mi, eu condimentum nisi imperdiet et. Fusce eleifend diam justo, tristique rutrum purus varius in. Duis sit amet justo aliquam, accumsan sapien non, rhoncus neque. Curabitur fringilla lacus vel lacus tempor, vitae convallis est luctus. Maecenas ut turpis gravida, ullamcorper urna sit amet, tempor massa. Suspendisse commodo diam nec tempor tristique. Sed consequat efficitur consectetur. Ut nec convallis lacus, sit amet bibendum nibh. Etiam eleifend at libero commodo volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, felis at rutrum commodo, orci justo tincidunt nisl, posuere faucibus odio risus vel lacus. Nullam et pulvinar nisi, vel ullamcorper ex. Praesent ut placerat dolor.
Donec massa ex, placerat ut suscipit non, consequat non velit. Donec id tortor vel diam porttitor facilisis. Pellentesque sed pharetra nulla. Proin nec odio nisi. Sed laoreet lacus vitae nisl convallis, id congue ipsum vehicula. Maecenas finibus tincidunt felis et lobortis. Nam suscipit aliquam orci, vitae sodales mi dictum id. Nunc eu velit fringilla lorem tincidunt tempor. Duis est neque, molestie in dictum at, interdum interdum nulla. Aenean nec justo non libero ultrices consequat mollis vitae ligula. Morbi massa eros, rutrum ac tortor sit amet, sodales malesuada ante. Cras molestie libero id lectus laoreet gravida. Proin iaculis ligula vitae augue bibendum, et finibus nunc auctor.
Etiam viverra, eros pharetra varius vulputate, enim mauris mattis turpis, quis dapibus libero nisi sit amet arcu. Pellentesque eget placerat augue. Vivamus consectetur tortor vel nulla facilisis, a aliquam dolor varius. Nulla facilisi. Morbi vel quam non sem fringilla ullamcorper. Ut sed ipsum quis nibh hendrerit dictum. Vestibulum tempor, urna a eleifend malesuada, augue enim porttitor mi, et porta diam odio at justo. Praesent maximus dictum ipsum, eu sagittis velit volutpat eget. Quisque tempor tellus vel ornare finibus. Nullam tincidunt nunc sed urna aliquam, vel interdum metus vulputate.
</div>
</div>
{% set titleStyle = 'content-section--lineless' in modifier ? '' : 'text-button' %}
<div class="content-section {{ modifier }} {{ class }}">
{% if data.title %}
<div class="content-section__title {{ titleStyle }}">{{ data.title }}</div>
{% endif %}
{% if data.content %}
<div class="content-section__content">
{{ data.content }}
</div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Section 1",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus feugiat mi, eu condimentum nisi imperdiet et. Fusce eleifend diam justo, tristique rutrum purus varius in. Duis sit amet justo aliquam, accumsan sapien non, rhoncus neque. Curabitur fringilla lacus vel lacus tempor, vitae convallis est luctus. Maecenas ut turpis gravida, ullamcorper urna sit amet, tempor massa. Suspendisse commodo diam nec tempor tristique. Sed consequat efficitur consectetur. Ut nec convallis lacus, sit amet bibendum nibh. Etiam eleifend at libero commodo volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, felis at rutrum commodo, orci justo tincidunt nisl, posuere faucibus odio risus vel lacus. Nullam et pulvinar nisi, vel ullamcorper ex. Praesent ut placerat dolor.\n\nDonec massa ex, placerat ut suscipit non, consequat non velit. Donec id tortor vel diam porttitor facilisis. Pellentesque sed pharetra nulla. Proin nec odio nisi. Sed laoreet lacus vitae nisl convallis, id congue ipsum vehicula. Maecenas finibus tincidunt felis et lobortis. Nam suscipit aliquam orci, vitae sodales mi dictum id. Nunc eu velit fringilla lorem tincidunt tempor. Duis est neque, molestie in dictum at, interdum interdum nulla. Aenean nec justo non libero ultrices consequat mollis vitae ligula. Morbi massa eros, rutrum ac tortor sit amet, sodales malesuada ante. Cras molestie libero id lectus laoreet gravida. Proin iaculis ligula vitae augue bibendum, et finibus nunc auctor.\n\nEtiam viverra, eros pharetra varius vulputate, enim mauris mattis turpis, quis dapibus libero nisi sit amet arcu. Pellentesque eget placerat augue. Vivamus consectetur tortor vel nulla facilisis, a aliquam dolor varius. Nulla facilisi. Morbi vel quam non sem fringilla ullamcorper. Ut sed ipsum quis nibh hendrerit dictum. Vestibulum tempor, urna a eleifend malesuada, augue enim porttitor mi, et porta diam odio at justo. Praesent maximus dictum ipsum, eu sagittis velit volutpat eget. Quisque tempor tellus vel ornare finibus. Nullam tincidunt nunc sed urna aliquam, vel interdum metus vulputate."
},
"modifier": "content-section--inset"
}
.content-section {
display: flex;
flex-direction: column;
transition: $transition-duration $transition-easing;
transition-property: box-shadow;
&.content-section--outset {
box-shadow: none;
@include bp(sm-min) {
@include gridcol(margin-left, -6.35, $grid-cols-md);
}
}
}
.content-section__title {
border-top: 1px solid;
border-bottom: 1px solid;
background-color: var(--color-background);
padding: 7px 16px;
z-index: map_get($zindex, contentSectionTitle);
transition: $transition-duration $transition-easing;
transition-property: box-shadow, background-color;
@include bp(sm-min) {
padding: 14px 32px;
}
.content-section--outset > & {
text-transform: uppercase;
border-top: none;
border-bottom: none;
z-index: map_get($zindex, default);
@include bp(sm-min) {
padding: 32px 0 0 90px;
}
}
.content-section--visible-sm > & {
display: none;
@include bp(sm-min) {
display: block;
}
}
.content-section--sticky-z > & {
position: sticky; /* stylelint-disable-line plugin/no-unsupported-browser-features */
z-index: map_get($zindex, contentSectionTitle);
@include bp(sm-min) {
z-index: map_get($zindex, default);
}
}
.content-section--lineless > & {
box-shadow: none;
}
.content-section--sticky > & {
position: sticky; /* stylelint-disable-line plugin/no-unsupported-browser-features */
z-index: map_get($zindex, contentSectionTitle);
}
}
.content-section__content {
flex-grow: 1;
transition: $transition-duration $transition-easing;
transition-property: background-color;
.content-section--padding > & {
padding: 24px 17px 38px 15px;
@include bp(sm-min) {
padding: 40px 32px 64px;
}
}
.content-section--max-width > & {
max-width: 1200px;
}
.content-section--outset > & {
box-shadow: none;
@include bp(sm-min) {
box-shadow: 0 1px 0 0 var(--color-brand);
}
}
.content-section--inset > & {
display: flow-root;
@include bp(sm-min) {
box-shadow: -1px 0 0 0 var(--color-brand);
transition: $transition-duration $transition-easing;
transition-property: background-color, box-shadow;
@include gridcol(margin-left, 5, $grid-cols-md);
}
}
}
import './content-section.scss';
import Component from '@component';
interface IContentSectionSettings {
titleClass: string;
stickyClass: string;
stickyIndexClass: string;
}
export default class ContentSection extends Component {
static initSelector: string = '.content-section';
settings: IContentSectionSettings;
title: JQuery;
borderThreshold: number = 0.01;
constructor(element: HTMLElement) {
super(element);
this.settings = {
stickyClass: 'content-section--sticky',
stickyIndexClass: 'content-section--sticky-z',
titleClass: 'content-section__title',
};
this.title = this.element.find('.' + this.settings.titleClass);
this.init();
}
init(): void {
if (this.element.hasClass(this.settings.stickyClass) || this.element.hasClass(this.settings.stickyIndexClass)) {
window.addEventListener('scroll', this.scrollHandler.bind(this));
this.scrollHandler();
}
}
scrollHandler(): void {
const boxSize: DOMRect = this.element[0].getBoundingClientRect();
const titleSize: DOMRect = this.title[0].getBoundingClientRect();
const percent: number = Math.min(Math.max(titleSize.top / (boxSize.top + boxSize.height - titleSize.height), 0), 1);
this.title.css('border-bottom', percent > 1 - this.borderThreshold ? 'none' : '');
}
}
<div class="content-section content-section--outset ">
<div class="content-section__title text-button">Section 1</div>
<div class="content-section__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus feugiat mi, eu condimentum nisi imperdiet et. Fusce eleifend diam justo, tristique rutrum purus varius in. Duis sit amet justo aliquam, accumsan sapien non, rhoncus neque. Curabitur fringilla lacus vel lacus tempor, vitae convallis est luctus. Maecenas ut turpis gravida, ullamcorper urna sit amet, tempor massa. Suspendisse commodo diam nec tempor tristique. Sed consequat efficitur consectetur. Ut nec convallis lacus, sit amet bibendum nibh. Etiam eleifend at libero commodo volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, felis at rutrum commodo, orci justo tincidunt nisl, posuere faucibus odio risus vel lacus. Nullam et pulvinar nisi, vel ullamcorper ex. Praesent ut placerat dolor.
Donec massa ex, placerat ut suscipit non, consequat non velit. Donec id tortor vel diam porttitor facilisis. Pellentesque sed pharetra nulla. Proin nec odio nisi. Sed laoreet lacus vitae nisl convallis, id congue ipsum vehicula. Maecenas finibus tincidunt felis et lobortis. Nam suscipit aliquam orci, vitae sodales mi dictum id. Nunc eu velit fringilla lorem tincidunt tempor. Duis est neque, molestie in dictum at, interdum interdum nulla. Aenean nec justo non libero ultrices consequat mollis vitae ligula. Morbi massa eros, rutrum ac tortor sit amet, sodales malesuada ante. Cras molestie libero id lectus laoreet gravida. Proin iaculis ligula vitae augue bibendum, et finibus nunc auctor.
Etiam viverra, eros pharetra varius vulputate, enim mauris mattis turpis, quis dapibus libero nisi sit amet arcu. Pellentesque eget placerat augue. Vivamus consectetur tortor vel nulla facilisis, a aliquam dolor varius. Nulla facilisi. Morbi vel quam non sem fringilla ullamcorper. Ut sed ipsum quis nibh hendrerit dictum. Vestibulum tempor, urna a eleifend malesuada, augue enim porttitor mi, et porta diam odio at justo. Praesent maximus dictum ipsum, eu sagittis velit volutpat eget. Quisque tempor tellus vel ornare finibus. Nullam tincidunt nunc sed urna aliquam, vel interdum metus vulputate.
</div>
</div>
{% set titleStyle = 'content-section--lineless' in modifier ? '' : 'text-button' %}
<div class="content-section {{ modifier }} {{ class }}">
{% if data.title %}
<div class="content-section__title {{ titleStyle }}">{{ data.title }}</div>
{% endif %}
{% if data.content %}
<div class="content-section__content">
{{ data.content }}
</div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Section 1",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus feugiat mi, eu condimentum nisi imperdiet et. Fusce eleifend diam justo, tristique rutrum purus varius in. Duis sit amet justo aliquam, accumsan sapien non, rhoncus neque. Curabitur fringilla lacus vel lacus tempor, vitae convallis est luctus. Maecenas ut turpis gravida, ullamcorper urna sit amet, tempor massa. Suspendisse commodo diam nec tempor tristique. Sed consequat efficitur consectetur. Ut nec convallis lacus, sit amet bibendum nibh. Etiam eleifend at libero commodo volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, felis at rutrum commodo, orci justo tincidunt nisl, posuere faucibus odio risus vel lacus. Nullam et pulvinar nisi, vel ullamcorper ex. Praesent ut placerat dolor.\n\nDonec massa ex, placerat ut suscipit non, consequat non velit. Donec id tortor vel diam porttitor facilisis. Pellentesque sed pharetra nulla. Proin nec odio nisi. Sed laoreet lacus vitae nisl convallis, id congue ipsum vehicula. Maecenas finibus tincidunt felis et lobortis. Nam suscipit aliquam orci, vitae sodales mi dictum id. Nunc eu velit fringilla lorem tincidunt tempor. Duis est neque, molestie in dictum at, interdum interdum nulla. Aenean nec justo non libero ultrices consequat mollis vitae ligula. Morbi massa eros, rutrum ac tortor sit amet, sodales malesuada ante. Cras molestie libero id lectus laoreet gravida. Proin iaculis ligula vitae augue bibendum, et finibus nunc auctor.\n\nEtiam viverra, eros pharetra varius vulputate, enim mauris mattis turpis, quis dapibus libero nisi sit amet arcu. Pellentesque eget placerat augue. Vivamus consectetur tortor vel nulla facilisis, a aliquam dolor varius. Nulla facilisi. Morbi vel quam non sem fringilla ullamcorper. Ut sed ipsum quis nibh hendrerit dictum. Vestibulum tempor, urna a eleifend malesuada, augue enim porttitor mi, et porta diam odio at justo. Praesent maximus dictum ipsum, eu sagittis velit volutpat eget. Quisque tempor tellus vel ornare finibus. Nullam tincidunt nunc sed urna aliquam, vel interdum metus vulputate."
},
"modifier": "content-section--outset"
}
.content-section {
display: flex;
flex-direction: column;
transition: $transition-duration $transition-easing;
transition-property: box-shadow;
&.content-section--outset {
box-shadow: none;
@include bp(sm-min) {
@include gridcol(margin-left, -6.35, $grid-cols-md);
}
}
}
.content-section__title {
border-top: 1px solid;
border-bottom: 1px solid;
background-color: var(--color-background);
padding: 7px 16px;
z-index: map_get($zindex, contentSectionTitle);
transition: $transition-duration $transition-easing;
transition-property: box-shadow, background-color;
@include bp(sm-min) {
padding: 14px 32px;
}
.content-section--outset > & {
text-transform: uppercase;
border-top: none;
border-bottom: none;
z-index: map_get($zindex, default);
@include bp(sm-min) {
padding: 32px 0 0 90px;
}
}
.content-section--visible-sm > & {
display: none;
@include bp(sm-min) {
display: block;
}
}
.content-section--sticky-z > & {
position: sticky; /* stylelint-disable-line plugin/no-unsupported-browser-features */
z-index: map_get($zindex, contentSectionTitle);
@include bp(sm-min) {
z-index: map_get($zindex, default);
}
}
.content-section--lineless > & {
box-shadow: none;
}
.content-section--sticky > & {
position: sticky; /* stylelint-disable-line plugin/no-unsupported-browser-features */
z-index: map_get($zindex, contentSectionTitle);
}
}
.content-section__content {
flex-grow: 1;
transition: $transition-duration $transition-easing;
transition-property: background-color;
.content-section--padding > & {
padding: 24px 17px 38px 15px;
@include bp(sm-min) {
padding: 40px 32px 64px;
}
}
.content-section--max-width > & {
max-width: 1200px;
}
.content-section--outset > & {
box-shadow: none;
@include bp(sm-min) {
box-shadow: 0 1px 0 0 var(--color-brand);
}
}
.content-section--inset > & {
display: flow-root;
@include bp(sm-min) {
box-shadow: -1px 0 0 0 var(--color-brand);
transition: $transition-duration $transition-easing;
transition-property: background-color, box-shadow;
@include gridcol(margin-left, 5, $grid-cols-md);
}
}
}
import './content-section.scss';
import Component from '@component';
interface IContentSectionSettings {
titleClass: string;
stickyClass: string;
stickyIndexClass: string;
}
export default class ContentSection extends Component {
static initSelector: string = '.content-section';
settings: IContentSectionSettings;
title: JQuery;
borderThreshold: number = 0.01;
constructor(element: HTMLElement) {
super(element);
this.settings = {
stickyClass: 'content-section--sticky',
stickyIndexClass: 'content-section--sticky-z',
titleClass: 'content-section__title',
};
this.title = this.element.find('.' + this.settings.titleClass);
this.init();
}
init(): void {
if (this.element.hasClass(this.settings.stickyClass) || this.element.hasClass(this.settings.stickyIndexClass)) {
window.addEventListener('scroll', this.scrollHandler.bind(this));
this.scrollHandler();
}
}
scrollHandler(): void {
const boxSize: DOMRect = this.element[0].getBoundingClientRect();
const titleSize: DOMRect = this.title[0].getBoundingClientRect();
const percent: number = Math.min(Math.max(titleSize.top / (boxSize.top + boxSize.height - titleSize.height), 0), 1);
this.title.css('border-bottom', percent > 1 - this.borderThreshold ? 'none' : '');
}
}
<div class="content-section content-section--lineless ">
<div class="content-section__title ">Section 1</div>
<div class="content-section__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus feugiat mi, eu condimentum nisi imperdiet et. Fusce eleifend diam justo, tristique rutrum purus varius in. Duis sit amet justo aliquam, accumsan sapien non, rhoncus neque. Curabitur fringilla lacus vel lacus tempor, vitae convallis est luctus. Maecenas ut turpis gravida, ullamcorper urna sit amet, tempor massa. Suspendisse commodo diam nec tempor tristique. Sed consequat efficitur consectetur. Ut nec convallis lacus, sit amet bibendum nibh. Etiam eleifend at libero commodo volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, felis at rutrum commodo, orci justo tincidunt nisl, posuere faucibus odio risus vel lacus. Nullam et pulvinar nisi, vel ullamcorper ex. Praesent ut placerat dolor.
Donec massa ex, placerat ut suscipit non, consequat non velit. Donec id tortor vel diam porttitor facilisis. Pellentesque sed pharetra nulla. Proin nec odio nisi. Sed laoreet lacus vitae nisl convallis, id congue ipsum vehicula. Maecenas finibus tincidunt felis et lobortis. Nam suscipit aliquam orci, vitae sodales mi dictum id. Nunc eu velit fringilla lorem tincidunt tempor. Duis est neque, molestie in dictum at, interdum interdum nulla. Aenean nec justo non libero ultrices consequat mollis vitae ligula. Morbi massa eros, rutrum ac tortor sit amet, sodales malesuada ante. Cras molestie libero id lectus laoreet gravida. Proin iaculis ligula vitae augue bibendum, et finibus nunc auctor.
Etiam viverra, eros pharetra varius vulputate, enim mauris mattis turpis, quis dapibus libero nisi sit amet arcu. Pellentesque eget placerat augue. Vivamus consectetur tortor vel nulla facilisis, a aliquam dolor varius. Nulla facilisi. Morbi vel quam non sem fringilla ullamcorper. Ut sed ipsum quis nibh hendrerit dictum. Vestibulum tempor, urna a eleifend malesuada, augue enim porttitor mi, et porta diam odio at justo. Praesent maximus dictum ipsum, eu sagittis velit volutpat eget. Quisque tempor tellus vel ornare finibus. Nullam tincidunt nunc sed urna aliquam, vel interdum metus vulputate.
</div>
</div>
{% set titleStyle = 'content-section--lineless' in modifier ? '' : 'text-button' %}
<div class="content-section {{ modifier }} {{ class }}">
{% if data.title %}
<div class="content-section__title {{ titleStyle }}">{{ data.title }}</div>
{% endif %}
{% if data.content %}
<div class="content-section__content">
{{ data.content }}
</div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Section 1",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus feugiat mi, eu condimentum nisi imperdiet et. Fusce eleifend diam justo, tristique rutrum purus varius in. Duis sit amet justo aliquam, accumsan sapien non, rhoncus neque. Curabitur fringilla lacus vel lacus tempor, vitae convallis est luctus. Maecenas ut turpis gravida, ullamcorper urna sit amet, tempor massa. Suspendisse commodo diam nec tempor tristique. Sed consequat efficitur consectetur. Ut nec convallis lacus, sit amet bibendum nibh. Etiam eleifend at libero commodo volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, felis at rutrum commodo, orci justo tincidunt nisl, posuere faucibus odio risus vel lacus. Nullam et pulvinar nisi, vel ullamcorper ex. Praesent ut placerat dolor.\n\nDonec massa ex, placerat ut suscipit non, consequat non velit. Donec id tortor vel diam porttitor facilisis. Pellentesque sed pharetra nulla. Proin nec odio nisi. Sed laoreet lacus vitae nisl convallis, id congue ipsum vehicula. Maecenas finibus tincidunt felis et lobortis. Nam suscipit aliquam orci, vitae sodales mi dictum id. Nunc eu velit fringilla lorem tincidunt tempor. Duis est neque, molestie in dictum at, interdum interdum nulla. Aenean nec justo non libero ultrices consequat mollis vitae ligula. Morbi massa eros, rutrum ac tortor sit amet, sodales malesuada ante. Cras molestie libero id lectus laoreet gravida. Proin iaculis ligula vitae augue bibendum, et finibus nunc auctor.\n\nEtiam viverra, eros pharetra varius vulputate, enim mauris mattis turpis, quis dapibus libero nisi sit amet arcu. Pellentesque eget placerat augue. Vivamus consectetur tortor vel nulla facilisis, a aliquam dolor varius. Nulla facilisi. Morbi vel quam non sem fringilla ullamcorper. Ut sed ipsum quis nibh hendrerit dictum. Vestibulum tempor, urna a eleifend malesuada, augue enim porttitor mi, et porta diam odio at justo. Praesent maximus dictum ipsum, eu sagittis velit volutpat eget. Quisque tempor tellus vel ornare finibus. Nullam tincidunt nunc sed urna aliquam, vel interdum metus vulputate."
},
"modifier": "content-section--lineless"
}
.content-section {
display: flex;
flex-direction: column;
transition: $transition-duration $transition-easing;
transition-property: box-shadow;
&.content-section--outset {
box-shadow: none;
@include bp(sm-min) {
@include gridcol(margin-left, -6.35, $grid-cols-md);
}
}
}
.content-section__title {
border-top: 1px solid;
border-bottom: 1px solid;
background-color: var(--color-background);
padding: 7px 16px;
z-index: map_get($zindex, contentSectionTitle);
transition: $transition-duration $transition-easing;
transition-property: box-shadow, background-color;
@include bp(sm-min) {
padding: 14px 32px;
}
.content-section--outset > & {
text-transform: uppercase;
border-top: none;
border-bottom: none;
z-index: map_get($zindex, default);
@include bp(sm-min) {
padding: 32px 0 0 90px;
}
}
.content-section--visible-sm > & {
display: none;
@include bp(sm-min) {
display: block;
}
}
.content-section--sticky-z > & {
position: sticky; /* stylelint-disable-line plugin/no-unsupported-browser-features */
z-index: map_get($zindex, contentSectionTitle);
@include bp(sm-min) {
z-index: map_get($zindex, default);
}
}
.content-section--lineless > & {
box-shadow: none;
}
.content-section--sticky > & {
position: sticky; /* stylelint-disable-line plugin/no-unsupported-browser-features */
z-index: map_get($zindex, contentSectionTitle);
}
}
.content-section__content {
flex-grow: 1;
transition: $transition-duration $transition-easing;
transition-property: background-color;
.content-section--padding > & {
padding: 24px 17px 38px 15px;
@include bp(sm-min) {
padding: 40px 32px 64px;
}
}
.content-section--max-width > & {
max-width: 1200px;
}
.content-section--outset > & {
box-shadow: none;
@include bp(sm-min) {
box-shadow: 0 1px 0 0 var(--color-brand);
}
}
.content-section--inset > & {
display: flow-root;
@include bp(sm-min) {
box-shadow: -1px 0 0 0 var(--color-brand);
transition: $transition-duration $transition-easing;
transition-property: background-color, box-shadow;
@include gridcol(margin-left, 5, $grid-cols-md);
}
}
}
import './content-section.scss';
import Component from '@component';
interface IContentSectionSettings {
titleClass: string;
stickyClass: string;
stickyIndexClass: string;
}
export default class ContentSection extends Component {
static initSelector: string = '.content-section';
settings: IContentSectionSettings;
title: JQuery;
borderThreshold: number = 0.01;
constructor(element: HTMLElement) {
super(element);
this.settings = {
stickyClass: 'content-section--sticky',
stickyIndexClass: 'content-section--sticky-z',
titleClass: 'content-section__title',
};
this.title = this.element.find('.' + this.settings.titleClass);
this.init();
}
init(): void {
if (this.element.hasClass(this.settings.stickyClass) || this.element.hasClass(this.settings.stickyIndexClass)) {
window.addEventListener('scroll', this.scrollHandler.bind(this));
this.scrollHandler();
}
}
scrollHandler(): void {
const boxSize: DOMRect = this.element[0].getBoundingClientRect();
const titleSize: DOMRect = this.title[0].getBoundingClientRect();
const percent: number = Math.min(Math.max(titleSize.top / (boxSize.top + boxSize.height - titleSize.height), 0), 1);
this.title.css('border-bottom', percent > 1 - this.borderThreshold ? 'none' : '');
}
}