Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Details

Privacy

Go PRO Window blinds lowered to protect code. Code Editor with window blinds (raised) and a light blub turned on.

Keep it secret; keep it safe.

Private Pens are hidden everywhere on CodePen, except to you. You can still share them and other people can see them, they just can't find them through searching or browsing.

Upgrade to PRO

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Template

Make Template?

Templates are Pens that can be used to start other Pens quickly from the create menu. The new Pen will copy all the code and settings from the template and make a new Pen (that is not a fork). You can view all of your templates, or learn more in the documentation.

Template URL

Any Pen can act as a template (even if you don't flip the toggle above) with a special URL you can use yourself or share with others. Here's this Pen's template URL:

Screenshot

Screenshot or Custom Thumbnail

Screenshots of Pens are shown in mobile browsers, RSS feeds, to users who chose images instead of iframes, and in social media sharing.

This Pen is using the default Screenshot, generated by CodePen. Upgrade to PRO to upload your own thumbnail that will be displayed on previews of this pen throughout the site and when sharing to social media.

Upgrade to PRO

HTML

              
                <div class="wrap">
  <div class="top scrollstick">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates vero quis facilis veritatis non? Accusamus quis asperiores porro animi laborum harum maiores dicta natus quae, dolorum nobis facere! Dignissimos unde, sunt molestiae similique quaerat porro dolorem adipisci repellat delectus at eveniet nobis labore, aliquid eum ipsum numquam! Cum autem cumque consequuntur beatae aliquid similique quae, incidunt doloribus facilis quam dicta. Repellendus voluptates ex, atque aperiam nam distinctio inventore nesciunt et delectus esse dolores aspernatur animi suscipit quod, amet exercitationem voluptatum itaque sint nobis ullam eligendi eius, hic sunt. Veritatis, quo tenetur eligendi molestias, cum asperiores repudiandae tempora voluptates consequuntur libero aliquam nam praesentium. Reprehenderit, id a non, deserunt aut accusantium fuga praesentium, sapiente excepturi iusto quam ab aliquid, laboriosam illum esse iure placeat. Nobis quis alias pariatur hic natus dolorum architecto numquam doloribus ullam dolore corporis facilis molestias commodi, eos illo voluptatum voluptas laboriosam unde iure, sit beatae. Neque, fugiat adipisci. Ea fugiat magnam similique esse enim nihil praesentium dignissimos! Et perferendis ut sint fuga, aliquam rem, molestiae architecto necessitatibus qui quis nulla, deleniti neque dignissimos ducimus aspernatur officiis odio deserunt quaerat alias, animi laborum quod. Nobis, nostrum numquam, mollitia laudantium veniam ex quam tempore saepe consequatur non, quisquam odio distinctio unde ducimus. Natus, dolore, earum. Reprehenderit cum corporis, blanditiis eveniet, qui sequi facilis necessitatibus voluptas atque quos sunt quibusdam, fuga sapiente voluptatem pariatur dignissimos aliquam voluptatibus. Est nam quaerat earum porro accusamus fugit adipisci ipsum, unde soluta error enim ex debitis molestiae voluptatum, exercitationem. In dolor atque veritatis dolorem, et quam sequi at consequuntur odio pariatur deleniti ipsa, natus provident consectetur, voluptates debitis, quos perferendis minima nobis. Vitae rerum quos molestias possimus quidem odit odio, nulla, natus exercitationem fugiat vero explicabo tenetur molestiae qui eaque numquam cupiditate a tempora laborum fugit ea sunt. Quod placeat recusandae quia neque assumenda voluptatibus mollitia commodi consequuntur, quae quasi totam pariatur, delectus laborum. Tempora sapiente, magnam et, nam autem ducimus dolorum obcaecati! Maiores inventore, nostrum ipsa eaque totam, earum eveniet eius aut, fuga pariatur temporibus. Dolorem reiciendis harum vero consequatur dolores possimus, sed molestias sequi beatae saepe ipsam perspiciatis qui molestiae esse officia libero. Quam blanditiis labore error velit vero, dolores harum maxime minima repellat fugit architecto. Sapiente dolores ratione, fuga quis magni modi natus quisquam accusantium saepe voluptatum, sunt non dolore ullam tempora id. Repudiandae animi, eveniet similique velit dolores ducimus odio quaerat, consectetur beatae cum sint tempora consequatur non, modi tenetur omnis libero a aliquid! Fugiat nobis aliquam molestias, excepturi ad itaque cum laudantium iste officia optio qui consequuntur enim, voluptas repellat tempore laboriosam, esse libero praesentium aut et explicabo perferendis, expedita quas rem tenetur. Cumque, commodi ipsum minus magnam sed praesentium tenetur culpa accusamus odio, porro. Expedita velit, nulla illum inventore quam, dolorum quibusdam dolores reiciendis vel, amet ea repellat! Maiores, minima molestiae, magni officia impedit saepe enim est alias possimus. Eum nisi quibusdam eveniet error ut! Sunt natus, unde voluptatem odit facere quam quibusdam laborum omnis totam consectetur, hic quas, recusandae accusantium! Explicabo molestias dignissimos eveniet quidem vel eum sapiente adipisci itaque atque maxime doloremque, reprehenderit facilis debitis, voluptatem inventore, soluta aspernatur aliquid hic! Dicta soluta consequuntur a iste voluptatem, quo provident rem officiis nulla dignissimos dolorem blanditiis est? Ut fugiat tenetur aliquam facere temporibus placeat cum alias ea, quod? Neque atque ad excepturi nesciunt voluptas? Et veniam totam tempore dolor incidunt. Debitis ea, accusamus cum deleniti odio dignissimos quae aliquam sed veritatis dolor? Sed praesentium quod eum quo iure nostrum deleniti dolore id, at, nobis provident omnis neque, velit, qui similique amet aspernatur nesciunt nemo doloribus alias ex. Dignissimos nostrum ipsam aut ex, consequuntur magni saepe doloribus nam a debitis similique ratione inventore illo dolore atque provident non, corporis possimus. Nisi maxime ipsa dolor! Corporis perferendis, fuga quasi distinctio porro dolorem maxime, dignissimos voluptates aliquam error facilis eveniet blanditiis labore. Labore alias pariatur ipsam neque distinctio minus. Natus dignissimos, ratione, consequatur possimus, cumque iure tempora delectus fugiat reprehenderit, impedit ex. Alias asperiores, dolore quod aperiam libero itaque repudiandae omnis consequuntur eos, laboriosam commodi. Excepturi delectus error minima ab iste asperiores quidem architecto quam quae, unde optio sit ipsum, est mollitia eius tempore deserunt dicta, laudantium, aut impedit magni accusantium maiores. Accusamus, eaque? Aperiam consectetur sapiente velit quas similique voluptates hic, ipsam voluptatum rerum cum ducimus, numquam in suscipit nostrum vel error quibusdam dolor possimus incidunt vero laborum odit quo necessitatibus nulla. Illum voluptas a dicta alias expedita facere, eius et, voluptate, quaerat maiores vitae. Earum molestias amet illo et, voluptate sapiente ipsam! At soluta inventore facilis aut vel exercitationem laborum, nulla fugit assumenda, aliquam molestiae repellat hic laudantium impedit, quia nemo rerum. Alias dolore illum, vero. Vero mollitia molestias quia excepturi, ducimus nesciunt eos repellat magnam aliquam odit dignissimos, facere eius repellendus libero! Rem perferendis a nihil, deserunt voluptatem, quibusdam placeat quam cumque iste aut nisi dicta. Quasi porro incidunt tenetur illo recusandae ratione ipsum quisquam consectetur ipsa deserunt magni pariatur possimus perferendis voluptate necessitatibus et error commodi, ullam sit distinctio adipisci eius, doloribus aut! Ipsum recusandae, temporibus nobis. Iure rem laboriosam ratione maiores tenetur minima dolore corrupti vero, nostrum quas consequatur neque, consectetur enim obcaecati sunt? Mollitia odio eos qui dicta quaerat nihil quos eum quia nulla cumque doloremque in, voluptate, delectus, sequi iusto? Velit eum deserunt ut harum animi fuga, neque beatae maxime porro, dignissimos quas iste quasi eaque debitis autem corporis ex dolore fugit ab? Facere neque aperiam blanditiis magni repudiandae nam, veniam reprehenderit ut molestias commodi dolorum, ad sit veritatis earum fugit! Quidem quisquam alias aspernatur molestiae at laudantium, vel veritatis corporis aliquam doloremque cupiditate incidunt repellendus vero praesentium impedit qui ad ea expedita. Natus accusantium commodi cumque facilis at repudiandae iure recusandae culpa, perferendis mollitia animi reiciendis ipsum quasi molestiae assumenda nesciunt voluptate vitae. Odio perferendis exercitationem ullam voluptas inventore dolor reprehenderit, molestias tenetur distinctio ducimus ex quasi dolores iure ratione, eligendi quas saepe nesciunt. Saepe iure ullam, odit sint dolor veniam quod, impedit repellat sit laborum ab error molestias sapiente at illo dolorum quia ea mollitia explicabo doloremque! Quis, repellendus deleniti reiciendis!</div>
  <div class="bottom">Goodbye</div>
</div>
              
            
!

CSS

              
                html, body {
  padding: 0;
  margin: 0;
}

.top, .bottom {
  color: white;
  position: relative;
}

.top {
  padding: 10px;
  height: 120vh;
  background:red;
}

.bottom {
  padding: 10px;
  height: 100vh;
  background:black;
}
              
            
!

JS

              
                $.fn.scrollStick = function() {
	var elPosTop, windowHeight, elHeight, bottom, $window = $(window), elements = [];

	var setConstants = function() {
		windowHeight = $(window).height();
		for (var i=0; i<elements.length; i++) {
			var el = elements[i];
			el.posTop = el.$.position().top;
			el.height = el.$.outerHeight(true);
			el.bottom = el.posTop + el.height;
			if (windowHeight > el.bottom) {
				el.bottom = windowHeight;
			}
		}
	}

	var onScroll = function() {
		var scrollPos = $(document).scrollTop() + windowHeight;
		for (var i=0; i<elements.length; i++) {
			var el = elements[i];
			if (scrollPos >= el.bottom) {
				var offset =  Math.min(scrollPos - el.bottom, el.height); 
				el.$.css('transform', 'translate3d(0,' + offset + 'px,0)');
			} else {
				el.$.css('transform', 'translate3d(0,0,0)');
			}
		};
	}
	this.each(function(){
		var el = { 
			"$": $(this)
		};
		elements.push(el);
	});

	$window.load(setConstants);
	$window.resize(setConstants).resize();
	$window.scroll(onScroll);
}

$(document).ready(function(){
	$('.scrollstick').scrollStick();
});
              
            
!
999px
What did the colon say to the semicolon? Stop winking at me.

Console