<div id="wrap">

		<!-- section -->
		<div class="section">
			<div class="center">
				
				<div id="scroller">
					<div id="scroller-frame">
						<div id="scroller-block"></div>
					</div>
				</div>
				
			</div>
		</div>
		<!--/section -->

	</div>
html,
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #555;
	background: #fff;
}

* {
	box-sizing: border-box;
}

#wrap {
	position: relative;
}

.section {
	padding: 40px;
}

#scroller {
	width: 100%;
	height: 100px;
	background: #eee;
	overflow-x: scroll;
	
	&-frame {
		width: 5000px;
		height: 100%;
		background-image: repeating-linear-gradient(90deg, #aaa, #aaa 30px, #bbb 30px, #bbb 60px);
	}
	
	&-block {
		margin-left: 100px;
		width: 200px;
		height: 100%;
		position: sticky;
		left: 0;
		background: #000;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.