<section>
<div>
<h1>Sticky Pricing Table</h1>
<p>Scroll down to see the effect!</p>
</div>
</section>
<section>
<div class="container">
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>
<div>
Select your plan
<div class="svg-wrapper">
<svg viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 17v-4h-8v-2h8v-4l6 5-6 5z"/></svg>
</div>
</div>
</th>
<th>
<div class="heading">Starter</div>
<div class="info">
<div class="amount">$10 <span>month</span></div>
<div class="billing-msg">billed annually</div>
<button type="button">Get started</button>
</div>
</th>
<th>
<div class="heading">Essential</div>
<div class="info">
<div class="popular">Popular</div>
<div class="amount">$22 <span>month</span></div>
<div class="billing-msg">billed annually</div>
<button type="button">Get started</button>
</div>
</th>
<th>
<div class="heading">Professional</div>
<div class="info">
<div class="amount">$35 <span>month</span></div>
<div class="billing-msg">billed annually</div>
<button type="button">Get started</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Domain redirects</td>
<td>
<svg class="starter" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="essential" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="professional" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
</tr>
<tr>
<td>30 days money back</td>
<td>
<svg class="starter" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="essential" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="professional" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
</tr>
<tr>
<td>Free domain transfer</td>
<td>
<svg class="starter" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="essential" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="professional" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
</tr>
<tr>
<td>Free website setup</td>
<td>
<svg class="starter" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="essential" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="professional" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
</tr>
<tr>
<td>Network firewall</td>
<td>
<svg class="starter" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="essential" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="professional" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
</tr>
<tr>
<td>Forms customization</td>
<td>
<svg class="not-included" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.151 17.943l-4.143-4.102-4.117 4.159-1.833-1.833 4.104-4.157-4.162-4.119 1.833-1.833 4.155 4.102 4.106-4.16 1.849 1.849-4.1 4.141 4.157 4.104-1.849 1.849z"/></svg>
</td>
<td>
<svg class="essential" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="professional" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
</tr>
<tr>
<td>24/7 human support</td>
<td>
<svg class="not-included" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.151 17.943l-4.143-4.102-4.117 4.159-1.833-1.833 4.104-4.157-4.162-4.119 1.833-1.833 4.155 4.102 4.106-4.16 1.849 1.849-4.1 4.141 4.157 4.104-1.849 1.849z"/></svg>
</td>
<td>
<svg class="essential" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
<td>
<svg class="professional" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
</tr>
<tr>
<td>Unlimited websites</td>
<td>
<svg class="not-included" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.151 17.943l-4.143-4.102-4.117 4.159-1.833-1.833 4.104-4.157-4.162-4.119 1.833-1.833 4.155 4.102 4.106-4.16 1.849 1.849-4.1 4.141 4.157 4.104-1.849 1.849z"/></svg>
</td>
<td>
<svg class="not-included" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.151 17.943l-4.143-4.102-4.117 4.159-1.833-1.833 4.104-4.157-4.162-4.119 1.833-1.833 4.155 4.102 4.106-4.16 1.849 1.849-4.1 4.141 4.157 4.104-1.849 1.849z"/></svg>
</td>
<td>
<svg class="professional" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"/></svg>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section>
content here
</section>
<footer class="page-footer">
<small>Made with <span>❤</span> by <a href="http://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
</small>
</footer>/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap');
:root {
--white: white;
--gray: #999;
--lightgray: whitesmoke;
--popular: #ffdd40;
--starter: #f73859;
--essential: #00AEEF;
--professional: #FF7F45;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
button {
background: none;
border: none;
cursor: pointer;
}
table {
border-collapse: collapse;
}
body {
font: 18px/1.5 'Noto Sans', sans-serif;
background: var(--lightgray);
}
section:nth-child(1),
section:nth-child(3) {
padding: 30px 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
h1 {
font-size: 2.5rem;
}
.container {
max-width: 850px;
padding: 0 10px;
margin: 0 auto;
}
/* TABLE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.table-wrapper {
background: var(--white);
overflow-x: auto;
}
table {
position: relative;
text-align: center;
width: 100%;
}
table thead {
background: var(--white);
transition: box-shadow 0.2s;
}
table tr {
display: flex;
}
table th,
table td {
width: 25%;
min-width: 150px;
}
table th:nth-child(1) {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 1.5rem;
line-height: 1.3;
padding: 0 10px;
}
table th:nth-child(1) .svg-wrapper {
margin-top: 10px;
}
table th:nth-child(1) svg {
width: 22px;
height: 22px;
}
table th .heading {
padding: 1rem;
color: var(--white);
}
table th:nth-child(2) .heading {
background: var(--starter);
}
table th:nth-child(3) .heading {
background: var(--essential);
}
table th:nth-child(4) .heading {
background: var(--professional);
}
table th .info {
position: relative;
padding: 1.5rem 0;
border-left: 1px solid var(--lightgray);
}
table th .popular {
position: absolute;
top: 10px;
right: 0;
font-size: 11px;
background: var(--popular);
padding: 4px 8px;
border-radius: 2px;
}
table th .amount {
font-size: 2rem;
}
table th .amount span {
display: block;
transform: translateY(-8px);
}
table th:nth-child(2) .amount {
color: var(--starter);
}
table th:nth-child(3) .amount {
color: var(--essential);
}
table th:nth-child(4) .amount {
color: var(--professional);
}
table th .billing-msg,
table th .amount span {
font-weight: normal;
font-size: 0.8rem;
}
table th button {
display: inline-block;
border-radius: 20px;
padding: 8px 20px;
margin-top: 10px;
transition: all 0.2s;
}
table th:nth-child(2) button {
color: var(--starter);
border: 1px solid var(--starter);
}
table th:nth-child(2) button:hover {
background: var(--starter);
}
table th:nth-child(3) button {
color: var(--essential);
border: 1px solid var(--essential);
}
table th:nth-child(3) button:hover {
background: var(--essential);
}
table th:nth-child(4) button {
color: var(--professional);
border: 1px solid var(--professional);
}
table th:nth-child(4) button:hover {
background: var(--professional);
}
table th button:hover {
color: var(--white);
}
table td {
padding: 10px;
}
table td:not(:first-child) {
border-left: 1px solid var(--lightgray);
}
table td:first-child {
font-size: 1rem;
text-align: left;
}
table svg {
width: 18px;
height: 18px;
}
table svg.not-included {
fill: var(--gray);
}
table svg.starter {
fill: var(--starter);
}
table svg.essential {
fill: var(--essential);
}
table svg.professional {
fill: var(--professional);
}
/* BODY CLASSES & MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sticky-table thead tr,
.sticky2-table thead tr {
z-index: 1;
}
@media screen and (min-width: 780px) {
section:nth-child(1),
section:nth-child(3) {
padding: 0;
}
section:nth-child(1) {
height: 70vh;
}
section:nth-child(3) {
height: 100vh;
}
table th:nth-child(1) {
padding: 0 20px;
}
table td {
padding: 20px;
}
.sticky-table table thead {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
.sticky-table table thead {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
}
.sticky2-table table thead {
position: absolute;
left: 0;
}
}
/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
font-size: 0.85rem;
padding: 10px;
text-align: right;
color: var(--black);
}
.page-footer span {
color: #e31b23;
}const body = document.body;
const firstSection = document.querySelector("section:nth-child(1)");
const lastSection = document.querySelector("section:nth-child(3)");
const table = document.querySelector("table");
const thead = document.querySelector("table thead");
const mq = window.matchMedia("(min-width: 780px)");
const stickyClass = "sticky-table";
const sticky2Class = "sticky2-table";
let tableWidth = table.offsetWidth;
let tableOffsetTop = table.getBoundingClientRect().top;
// or
//let tableOffsetTop = table.offsetTop;
let theadHeight = thead.offsetHeight;
window.addEventListener("scroll", scrollHandler);
window.addEventListener("resize", resizeHandler);
function scrollHandler() {
if (mq.matches) {
const scrollY = window.pageYOffset;
const lastSectionOffsetTop = lastSection.getBoundingClientRect().top;
if (scrollY >= tableOffsetTop) {
thead.style.width = `${tableWidth}px`;
if (lastSectionOffsetTop > theadHeight) {
body.classList.remove(sticky2Class);
body.classList.add(stickyClass);
thead.style.top = 0;
body.style.paddingTop = `${theadHeight}px`;
} else {
body.classList.remove(stickyClass);
body.classList.add(sticky2Class);
thead.style.top = `calc(100% - ${theadHeight}px)`;
}
} else {
body.classList.remove(stickyClass, sticky2Class);
body.style.paddingTop = 0;
thead.style.width = "100%";
thead.style.top = "auto";
}
}
}
function resizeHandler() {
if (mq.matches) {
tableWidth = table.offsetWidth;
tableOffsetTop = firstSection.offsetHeight;
theadHeight = thead.offsetHeight;
} else {
body.classList.remove(stickyClass, sticky2Class);
body.style.paddingTop = 0;
thead.style.width = "100%";
thead.style.top = "auto";
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.