Affix an element when user scrolls with Javascript using JQuery

From Knowledge Kitchen
Jump to navigation Jump to search


This example web page uses the jQuery Javascript library to help keep track of how far the user has scrolled on the page. Once the user has scrolled past the position of a certain element called an 'affix', that element becomes fixed at the top of the viewport.

HTML

Save this into a file named 'index.html' in the main project folder.

<!doctype html>
<html>
	<head>
		<title>Scroll affixer</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script src="http://code.jquery.com/jquery-3.2.0.min.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
	</head>
	<body>
		<div id="wrapper">
			<section>
				<h1>Scoll affixer</h1>

				<p>Bacon ipsum dolor sit amet hamburger filet mignon short ribs pork loin ground round rump bacon meatball tongue brisket bresaola pancetta beef ribs. Shoulder hamburger fatback ball tip beef ribs pork loin ribeye meatloaf drumstick prosciutto pastrami chuck salami. Frankfurter bacon shankle pork belly ham tenderloin pig hamburger turducken, sausage pork pancetta spare ribs. Hamburger andouille sirloin, kevin chicken venison meatloaf. Corned beef turkey ball tip pastrami tail sausage. Tail pork belly capicola shank, beef ribs bacon turkey short loin salami bresaola.</p>

				<p>Brisket salami fatback, spare ribs boudin tenderloin ham hock. Tenderloin tail brisket tongue. Swine chicken tongue shank strip steak meatloaf sausage pancetta salami turducken. Ribeye pork loin ham hock drumstick, meatball chuck pig andouille.</p>

				<div id="affix">
					hello goodbye hello goodbye
				</div>

				<p>Turducken tenderloin biltong, ham drumstick tri-tip shankle bacon ribeye ball tip tail meatloaf pancetta. Tri-tip doner ball tip tongue hamburger chuck sausage tail jowl cow filet mignon biltong turkey venison short ribs. Frankfurter corned beef pig beef ribs. Tenderloin sausage drumstick, doner kielbasa pastrami fatback boudin filet mignon tongue chicken bresaola prosciutto strip steak.</p>

				<p>Tenderloin capicola cow ground round turkey pork leberkas brisket. Short loin ball tip bacon salami kevin drumstick strip steak pork belly tri-tip brisket hamburger kielbasa pork. Pork loin drumstick shoulder salami, tri-tip bresaola rump shank tail swine pancetta chicken chuck. Turducken hamburger shoulder chuck corned beef tail. Kielbasa turducken venison hamburger bacon beef short loin sausage jerky, pancetta prosciutto corned beef. Strip steak ham bresaola prosciutto, chuck pork chop rump biltong tri-tip hamburger andouille swine ribeye. Shoulder short ribs turducken frankfurter pancetta shank.</p>

				<p>Shoulder filet mignon tongue andouille, chicken bresaola brisket tri-tip jerky sausage spare ribs leberkas. Shankle ham hock pig, short loin sausage swine ribeye biltong meatball ground round corned beef spare ribs. Pig pork capicola shankle turkey shank, strip steak bresaola spare ribs ham turducken ground round boudin. Pork jerky jowl filet mignon ham. Brisket tongue chuck, bacon kevin turkey beef frankfurter kielbasa drumstick strip steak sausage. Ribeye beef turkey, boudin tongue corned beef short ribs kevin t-bone shankle ground round fatback brisket.</p>

				<p>Venison doner t-bone pork belly short ribs sirloin turkey pig cow kielbasa pork loin drumstick bacon ribeye swine. Salami meatball shank, andouille tail cow chicken. Flank pork chop shankle chicken ribeye. Pork rump shank kevin. Ball tip sausage tail flank pastrami, tenderloin short ribs. Rump sausage turducken, beef ribs kevin drumstick ribeye leberkas.</p>

				<p>Frankfurter cow tenderloin pig, ground round salami jerky t-bone kevin short loin shank. Sirloin hamburger short loin pork tenderloin leberkas. Ball tip pig shank pork loin boudin shoulder chicken jowl pancetta prosciutto drumstick leberkas. Doner meatball jerky prosciutto leberkas sausage. Tri-tip filet mignon andouille shoulder, leberkas rump beef meatloaf flank. Biltong turkey capicola boudin drumstick chuck spare ribs.</p>

				<p>Pork chop shank doner drumstick. Beef tenderloin pork loin pancetta biltong pork belly pork chop capicola. Tri-tip biltong pig fatback. Boudin ground round pork frankfurter beef ribs. Sirloin jerky prosciutto, brisket doner flank shankle frankfurter rump biltong cow capicola ribeye short ribs tri-tip. Sausage boudin tongue pork chop bresaola tenderloin meatball. Turducken bresaola flank kielbasa pork ground round corned beef.</p>

				<p>Jowl t-bone drumstick corned beef. Bacon salami pork, pancetta turducken flank pig meatball filet mignon beef ribs drumstick. Leberkas pancetta meatloaf pork corned beef pork belly. Kevin andouille sausage meatloaf short loin boudin tongue pastrami pancetta short ribs, pork chop beef ribs chicken. Bresaola venison tenderloin, shoulder andouille short loin sausage bacon pastrami short ribs jerky rump shankle. Pork loin biltong tenderloin doner capicola.</p>

				<p>Jerky ham short ribs, frankfurter ball tip meatball fatback bresaola ground round sirloin corned beef boudin tenderloin jowl. Flank short loin turducken shankle strip steak salami turkey. Corned beef tongue shank cow, chicken prosciutto tenderloin. Venison bacon kielbasa tail, flank pig leberkas hamburger andouille turkey bresaola pastrami salami cow capicola. Pork loin flank kielbasa biltong.</p>

				<p>Drumstick short ribs bresaola flank, venison pork belly kielbasa ball tip. Pork pastrami hamburger ground round sausage. Corned beef andouille brisket swine, bresaola meatball salami doner hamburger ham hock. Tongue tenderloin ham hock kielbasa tail. Short ribs t-bone pig leberkas kielbasa capicola, tongue ham hock strip steak boudin turducken ground round. Andouille chuck doner ribeye, short ribs hamburger turkey t-bone fatback. Ham andouille prosciutto short loin, salami shankle pork chop short ribs brisket kielbasa corned beef.</p>

				<p>Short ribs venison brisket corned beef, drumstick ground round kielbasa fatback pastrami andouille. Beef shank biltong boudin cow fatback leberkas tail sirloin doner ball tip venison. Pork chop spare ribs venison kielbasa hamburger chicken. Jowl swine sirloin kielbasa, tongue pork belly shank strip steak drumstick bacon turducken pig sausage short ribs. Leberkas pork shankle pork chop. Venison drumstick chuck hamburger, shank kielbasa ground round bacon meatloaf fatback shoulder.</p>

				<p>Leberkas chicken frankfurter ribeye boudin bresaola turkey venison. Sirloin cow jowl strip steak ham pig. Biltong bresaola short ribs, prosciutto filet mignon rump brisket cow leberkas sirloin corned beef shoulder. Boudin flank tail short loin filet mignon beef. Pork chop sausage hamburger ball tip beef salami pancetta spare ribs pork belly boudin capicola. Tongue pork swine cow frankfurter boudin turkey pork loin pork chop salami.</p>

				<p>Sirloin chuck ball tip pork loin, beef ribs shankle ground round short ribs boudin bacon tail short loin meatball andouille. Shankle boudin shoulder, sirloin pork chop tri-tip ground round short loin. Fatback shoulder venison, meatball pork belly pork meatloaf capicola salami short loin pork loin flank filet mignon. Biltong bacon leberkas pastrami meatloaf. Meatloaf capicola pork chop, doner tongue corned beef sirloin pork loin beef ribs strip steak. Ground round brisket kevin biltong filet mignon ribeye shank bacon jowl pork loin flank beef pig andouille. Beef ribs tail pork belly shoulder venison tenderloin, pork chop turducken bacon beef meatloaf ribeye filet mignon.</p>

				<p>Biltong cow frankfurter beef, swine rump ground round ham kielbasa chuck. Short loin flank prosciutto meatball capicola shank. Meatloaf tenderloin prosciutto ham hock filet mignon ball tip spare ribs tongue, chicken leberkas biltong short loin. Cow shankle short ribs shoulder tongue meatloaf, shank chicken salami ham pork chop jowl hamburger bresaola biltong. Boudin bacon ball tip, kevin swine beef shoulder fatback.</p>

				<p>Salami chuck pancetta pork belly. Swine doner sausage, tail tenderloin jerky flank sirloin pork loin rump ribeye. Chuck ham hock salami chicken. Ham chuck fatback pastrami swine beef ribs strip steak. Fatback leberkas tri-tip strip steak turducken, shankle tail. Short loin chicken pork capicola turkey pig. Spare ribs beef strip steak, turducken flank tongue biltong meatloaf pork tail capicola shank pancetta andouille.</p>

				<p>T-bone tri-tip pork belly boudin salami ribeye pork chop. T-bone hamburger leberkas tail ground round tri-tip frankfurter salami andouille short ribs pork chop. Ball tip corned beef pork filet mignon brisket. Pastrami fatback drumstick chuck shankle boudin filet mignon andouille hamburger kevin sirloin chicken short ribs tri-tip flank. Tail pork belly doner, corned beef spare ribs rump beef ribs meatloaf bresaola. Shoulder pork belly filet mignon turducken, biltong tenderloin sirloin shankle ball tip fatback pastrami.</p>

				<p>Flank filet mignon corned beef frankfurter sirloin. Leberkas shoulder ribeye meatloaf brisket. Turkey biltong corned beef, tenderloin short ribs doner sirloin jerky hamburger meatloaf pig. Pork biltong sirloin beef ribs, chicken cow short ribs pork loin. Fatback turducken flank corned beef andouille tri-tip filet mignon short loin venison shankle doner pork loin turkey pastrami.</p>

				<p>Shoulder sirloin pork belly, chicken capicola doner brisket. Kevin ham hock meatloaf pork belly. Pastrami corned beef biltong beef ground round pork chop beef ribs. Leberkas pig chicken sausage hamburger short loin tri-tip strip steak doner rump sirloin andouille tongue shank pork belly. Chuck pig doner kevin tri-tip cow pork belly hamburger spare ribs boudin tongue jowl. Short loin rump shoulder, andouille venison fatback flank ham ribeye tri-tip.</p>

				<p>Chuck frankfurter brisket t-bone beef ribs. Spare ribs bacon ham shoulder, turducken leberkas t-bone chuck jowl shank ground round prosciutto drumstick hamburger pork belly. Flank shoulder sirloin, venison ribeye beef ribs pancetta kevin jowl doner. Turkey jerky beef boudin pork jowl pastrami tail shoulder ham hock chicken sirloin tri-tip. Beef ribs chuck tri-tip frankfurter ham venison pancetta andouille cow capicola.</p>

				<p>Short ribs filet mignon shank rump, tail leberkas t-bone pig cow strip steak doner salami pancetta kielbasa. T-bone beef ribs tenderloin chicken shank. Jerky kevin meatloaf cow beef ribs turkey ball tip flank. Tri-tip spare ribs drumstick rump ball tip pancetta bacon short ribs. Tongue cow rump leberkas.</p>

				<p>Sausage tail drumstick pastrami jerky, turducken beef pancetta rump. Ground round biltong bacon, rump kielbasa tongue prosciutto fatback beef. Ham hock rump brisket capicola sausage turkey boudin shoulder kielbasa beef pastrami ham prosciutto. Rump ham sirloin turducken. Turducken pastrami pig tenderloin pork.</p>

				<p>Biltong leberkas tenderloin brisket beef ham corned beef pork chop short loin jerky. Andouille rump prosciutto kielbasa swine, sirloin salami shankle. Pork chop turkey tail ball tip beef ribs doner meatball. Ribeye pancetta bresaola chicken bacon kielbasa shankle meatball hamburger pig pork turkey. Ball tip kevin bacon jowl leberkas. Strip steak drumstick t-bone short ribs turkey ham hock.</p>

				<p>Pastrami rump pancetta ham andouille cow prosciutto shoulder spare ribs shank ribeye. T-bone pork belly hamburger turducken boudin brisket beef ribs ball tip pancetta meatloaf short loin chuck pork. Flank short loin andouille, salami kielbasa sausage pastrami jowl. Tail beef ham pig. Fatback venison ham hock andouille ribeye spare ribs, swine kielbasa. T-bone pig cow short loin boudin andouille strip steak capicola biltong filet mignon pork belly pancetta leberkas pork.</p>

				<p>Biltong andouille tenderloin, tongue capicola leberkas pig meatloaf turkey venison t-bone turducken ball tip fatback strip steak. Ham hock turkey meatball hamburger, ball tip pork belly flank jowl capicola rump. Corned beef ribeye pork belly t-bone. Pig tongue jowl, tri-tip kielbasa pancetta chuck pastrami boudin kevin frankfurter.</p>

				<p>Spare ribs venison rump leberkas corned beef kielbasa. Chuck meatloaf chicken, pig doner tenderloin sausage shoulder bresaola tri-tip frankfurter short ribs ground round. Kevin andouille tenderloin venison frankfurter sirloin turkey pig ham hock spare ribs beef prosciutto ground round short loin. Pancetta kielbasa pork belly, shoulder flank beef bresaola frankfurter salami pork loin.</p>

				<p>Venison brisket beef short ribs pastrami kielbasa turducken. Ground round tongue brisket kielbasa shoulder, beef ribs sirloin hamburger boudin. Chuck beef short loin short ribs biltong. Ham hock rump kielbasa, tail brisket flank bacon ball tip cow frankfurter shank kevin meatloaf chicken doner. Sausage pork belly tail leberkas. Shoulder swine tongue chuck rump biltong sirloin.</p>

				<p>Turkey flank pork loin chuck biltong capicola, kevin shank drumstick pork chop tail. Doner short ribs pig spare ribs beef. Tri-tip ground round beef rump, chicken cow shank. Jerky hamburger tail flank fatback.</p>

				<p>Ham ham hock bresaola jerky short loin meatball filet mignon kielbasa drumstick spare ribs meatloaf chicken shank. Salami ground round t-bone frankfurter shoulder. Tail jowl frankfurter cow andouille. Sausage tenderloin shank pork belly pork short ribs.</p>

				<p>Turkey pork loin jowl cow pig, pork chop chicken brisket ham hock swine capicola tri-tip pork belly. Venison drumstick ball tip doner, beef bacon t-bone corned beef short ribs shankle. Boudin shankle ground round frankfurter filet mignon, capicola meatball ball tip pork tenderloin. Ham hock tongue ham shank venison flank drumstick swine ribeye pancetta kevin bacon andouille sirloin. Spare ribs kielbasa beef ribs frankfurter, shoulder pancetta t-bone pork belly meatball.</p>

				<p>Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!</p>

			</section>
			<footer>
				This is the footer.
			</footer>
		</div>
	</body>
</html>

CSS

Save this into a file named 'main.css' in a folder named 'css':

/* fixed-width centered container div */
div#wrapper {
	/* none of these styles are important for the functionality */
	width: 980px;
	padding: 10px;
	margin: 0 auto;
	border: 1px solid #c0c0c0;
}

/* styles for the affixed element */
#affix {
	/* 
	 * 'top' is the only important style in this block
	 * once this element becomes 'fixed' position, it will sit at the top 
	*/
	top: 0px;

	/* miscellaneous aesthetically-pleasing styles */
	width: 960px;
	padding: 10px;
	height: 100px;
	text-align: center;
	background-color: yellow;
	border: 1px solid #c0c0c0;
}


Javascript

Save this into a file named 'main.js' in a folder named 'js':

//wait until the page loads...
$(function() {

	//determine the starting position of the element we want to fix
	var affixStartingPosY = $("#affix").position().top;

	//then wait until the user scrolls the document...
	$(document).scroll(function() {

		//... and do the following each time the user scrolls

		//get the total amount the user has scrolled the document in pixels
		var scrollPosY = $(document).scrollTop();

		//check whether the user has scrolled past the position of the element we want to affix...
		if (scrollPosY >= affixStartingPosY) {
			//if so... make the element stuck on the page and not scroll with the rest of the page
			$("#affix").css("position", "fixed"); //set it so it doesn't scroll with the page anymore
		}
		else {
			//if not... make the element scroll with the rest of the page, as usual.
			$("#affix").css("position", "static"); //set it back to normal scroll behavior
		}

	});

});

What links here