FloatSidebar.js – specified viewport

by glenthemes

HTML

<script src="https://cdn.jsdelivr.net/gh/vursen/FloatSidebar.js@master/dist/float-sidebar.min.js"></script>

<header class="top-bar">example top bar</header>

<div class="scroll-cont">
	<div class="flex-cont">
		<aside class="sidebar">
			<div class="sidebar-inner">
				<img src="https://file.garden/ZRt8jW_MomIqlrfn/unsplash/artiom-vallat-NJ3tsbHr9KI-unsplash.jpg"/>
				<img src="https://file.garden/ZRt8jW_MomIqlrfn/unsplash/carli-jeen-15YDf39RIVc-unsplash.jpg"/>
			</div><!--sidebar-inner-->
		</aside><!--sidebar-->

		<section class="content">
NARRATOR: (Black screen with text; The sound of buzzing bees can be heard) According to all known laws of aviation, : there is no way a bee should be able to fly. : Its wings are too small to get its fat little body off the ground. : The bee, of course, flies anyway : because bees don't care what humans think is impossible. BARRY BENSON: (Barry is picking out a shirt) Yellow, black. Yellow, black. Yellow, black. Yellow, black. : Ooh, black and yellow! Let's shake it up a little. JANET BENSON: Barry! Breakfast is ready! BARRY: Coming! : Hang on a second. (Barry uses his antenna like a phone) : Hello? ADAM FLAYMAN: (Through phone) - Barry? BARRY: - Adam? ADAM: - Can you believe this is happening? BARRY: - I can't. I'll pick you up. (Barry flies down the stairs) : MARTIN BENSON: Looking sharp. JANET: Use the stairs. Your father paid good money for those. BARRY: Sorry. I'm excited. MARTIN: Here's the graduate. We're very proud of you, son. : A perfect report card, all B's. JANET: Very proud. (Rubs Barry's hair) BARRY= Ma! I got a thing going here. JANET: - You got lint on your fuzz. BARRY: - Ow! That's me! JANET: - Wave to us! We'll be in row 118,000. - Bye! (Barry flies out the door) JANET: Barry, I told you, stop flying in the house! (Barry drives through the hive,and is waved at by Adam who is reading a newspaper) BARRY== - Hey, Adam. ADAM: - Hey, Barry. (Adam gets in Barry's car) : - Is that fuzz gel? BARRY: - A little....

CSS

.top-bar {
	position:fixed;
	top:0;left:0;
	width:100%;
	height:100px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:black;
	color:white;
	z-index:99;
}

.scroll-cont {
	position:absolute;
	top:100px;
	left:0;
	width:100%;
	height:calc(100vh - 100px);
	overflow:auto;
}

.flex-cont {
	padding:20px;
	display:flex;
	flex-wrap:nowrap;
	align-items:flex-start;
	justify-content:center;
	gap:20px;
}

.flex-cont > * {
	position:relative;
	width:calc((100vw - (20px * 3)) / 2);
}

img {
	display:block;
	max-width:100%;
}

img + img {
	margin-top:20px;
}

JavaScript

let topGap = 100+20;
let botGap = 20;
let sidebar = document.querySelector(".sidebar");
let sidebarInner = sidebar.querySelector(".sidebar-inner");
let relative = document.querySelector(".content");
let viewport = document.querySelector(".scroll-cont");

const floatSidebar = FloatSidebar({
  sidebar,
  sidebarInner,
  viewport,
  relative,
  topSpacing: topGap,
  bottomSpacing: botGap
});

viewport.addEventListener("scroll", () => {
	floatSidebar.forceUpdate();
})