A Pen by Jeff Wainwright

Developer
Jeff Wainwright
Size
4,864 Kb
Views
14,168
  1. A Pen by Jeff Wainwright Previews
  2. A Pen by Jeff Wainwright HTML Codes
  3. A Pen by Jeff Wainwright CSS Codes
  4. A Pen by Jeff Wainwright JS Codes

How do I make an a pen by jeff wainwright?

What is a a pen by jeff wainwright? How do you make a a pen by jeff wainwright? This script and codes were developed by Jeff Wainwright on 08 December 2022, Thursday.

A Pen by Jeff Wainwright Previews
IQ Test

A Pen by Jeff Wainwright - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Jeff Wainwright</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="headline headline--title">CSS property <code>Position: Fixed</code> is not good for sticky elements on mobile devices</h1>
<p class="headline headline--description"><code>position: fixed</code> is a great css property when making elements stick to the document if they don't change! However, if they change state when customers scroll, elements will jitter and other weirdness is visible. <a href="https://dollarshaveclub.github.io/stickybits/">StickyBits

A Pen by Jeff Wainwright - Script Codes CSS Codes

body { min-height: 160rem; background-color: #fefbf7;
}
code { background-color: #eee;
}
.headline { margin: 1rem auto 0; max-width: calc(100vw - 10%);
}
.headline--title { text-align: center;
}
.headline--description { font-size: 1.25rem; line-height: 1.8;
}
.parent { height: 30rem; margin-top: 1rem; width: 100%;
}
.parent--sticky { background-color: #E8F1D4;
}
.parent--fixed { position: relative; background-color: #ffccd4;
}
.child { background-color: rgba(0, 0, 0, 0.2); height: 8rem; width: 100%; top: 0; z-index: 3;
}
.child--fixed { position: relative;
}
.child--fixed.js-is-fixed { position: fixed; top: 0;
}
.child--fixed.js-is-fixed-stuck { bottom: 0; position: absolute; top: auto;
}
.child__content { font-size: 1.25rem; max-width: 100%; padding: 0 calc(100vw - 95%); position: absolute;
}
.child__content--emoji { font-size: 7rem; top: .5rem;
}
.child__content--text { font-size: 1.25rem; margin-left: 8rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}

A Pen by Jeff Wainwright - Script Codes JS Codes

(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.stickybits = factory());
}(this, (function () { 'use strict';
var browserPrefix = ['', '-o-', '-webkit-', '-moz-', '-ms-'];
var stickyBitClass = 'js-is-sticky';
var stickyBitIsStuckClass = 'js-is-stuck';
function Stickybit(target, o) { this.el = target; this.scrollTarget = o && o.scrollTarget || window; this.stickyBitStickyOffset = o && o.stickyBitStickyOffset || 0; this.verticalPosition = o && o.verticalPosition || 'top'; this.useStickyClasses = o && o.useStickyClasses || false; this.elStyle = this.el.style; this.positionStickyVal = 'fixed';
}
Stickybit.prototype.setStickyPosition = function setStickyPosition() { var elStyle = this.elStyle; var verticalPosition = this.verticalPosition; for (var i = 0; i < browserPrefix.length; i += 1) { elStyle.position = browserPrefix[i] + 'sticky'; } if (elStyle.position !== '') { this.positionStickyVal = elStyle.position; if (verticalPosition === 'top') { elStyle[verticalPosition] = this.stickyBitStickyOffset + 'px'; } }
};
Stickybit.prototype.manageStickiness = function manageStickiness() { var el = this.el; var scrollTarget = this.scrollTarget; var positionStickyVal = this.positionStickyVal; var verticalPosition = this.verticalPosition; var stickyBitStickyOffset = this.stickyBitStickyOffset; var elStyle = this.elStyle; var elClasses = el.classList; var elParent = el.parentNode; var stickyBitStart = el.getBoundingClientRect().top; var stickyBitStop = stickyBitStart + elParent.offsetHeight - (el.offsetHeight - stickyBitStickyOffset); elParent.classList.add('js-stickybit-parent'); function stickiness() { var scroll = scrollTarget.scrollY; if (scroll < stickyBitStart) { if (elClasses.contains(stickyBitClass)) { elClasses.remove(stickyBitClass); if (positionStickyVal === 'fixed') elStyle.position = ''; } } else if (scroll > stickyBitStart && scroll < stickyBitStop) { if (!elClasses.contains(stickyBitClass)) elClasses.add(stickyBitClass); if (elClasses.contains(stickyBitIsStuckClass)) { elClasses.remove(stickyBitIsStuckClass); elStyle.bottom = ''; } elStyle.position = positionStickyVal; elStyle[verticalPosition] = stickyBitStickyOffset + 'px'; } else if (scroll > stickyBitStop && !elClasses.contains(stickyBitIsStuckClass)) { elClasses.remove(stickyBitClass); elClasses.add(stickyBitIsStuckClass); if (positionStickyVal !== 'fixed') return; elStyle.top = ''; elStyle.bottom = '0'; elStyle.position = 'absolute'; } } var invoked = void 0; function checkStickiness() { if (invoked) return; invoked = true; stickiness(); window.setTimeout(function () { invoked = false; }, 0); } scrollTarget.addEventListener('scroll', function () { return scrollTarget.requestAnimationFrame(checkStickiness); });
};
function stickybits(target, o) { var els = typeof target === 'string' ? document.querySelectorAll(target) : target; if (!('length' in els)) els = [els]; var stickyBit = void 0; for (var i = 0; i < els.length; i += 1) { var el = els[i]; stickyBit = new Stickybit(el, o); stickyBit.setStickyPosition(); if (stickyBit.positionStickyVal === 'fixed' || stickyBit.useStickyClasses === true) { stickyBit.manageStickiness(); } }
}
return stickybits;
})));
var $fixedEl = $('#fixed-child');
var $fixedParent = $('#fixed-parent');
var stickyCoords = {};
function getStickyCoords() { stickyCoords.start = $fixedParent.offset().top; var parentHeight = $fixedParent.outerHeight(); var fixedElHeight = $fixedEl.outerHeight(); var distance = parentHeight - fixedElHeight; stickyCoords.stop = stickyCoords.start + distance; return stickyCoords;
};
$(window).on('scroll', function() { var scroll = window.scrollY; getStickyCoords(); if (scroll < stickyCoords.start) { $fixedEl.removeClass('js-is-fixed'); return; } else if ( (scroll > stickyCoords.start) && (scroll < stickyCoords.stop) ) { $fixedEl.addClass('js-is-fixed'); $fixedEl.removeClass('js-is-fixed-stuck'); return; } else { $fixedEl.addClass('js-is-fixed-stuck'); $fixedEl.removeClass('js-is-fixed'); }
});
stickybits('#sticky-child');
A Pen by Jeff Wainwright - Script Codes
A Pen by Jeff Wainwright - Script Codes
Home Page Home
Developer Jeff Wainwright
Username yowainwright
Uploaded December 08, 2022
Rating 3
Size 4,864 Kb
Views 14,168
Do you need developer help for A Pen by Jeff Wainwright?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Wainwright (yowainwright) Script Codes
Name
Multiple Swiper Demo
Meeting Schedule Widget with Angular
Reframe.js Example
Stickybits with a custom vertical position
Shave, a javascript plugin for truncating text
Reframe.js Demo
Noframe.js Example
Quick Bootstrap ScrollSpy Demo
Stickybits Demo
Playing with URLs and ScrollSpy
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!