diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index e8e18b8973cf56..c062d974911908 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -168,6 +168,18 @@ function InserterMenu(
 
 	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
 
+	const [ isScrolled, setIsScrolled ] = useState( false );
+
+	const handleScroll = useCallback( ( event ) => {
+		const hasScrolled = event.target.scrollTop > 0;
+		setIsScrolled( ( prevIsScrolled ) => {
+			if ( hasScrolled !== prevIsScrolled ) {
+				return hasScrolled;
+			}
+			return prevIsScrolled;
+		} );
+	}, [] );
+
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
 			return null;
@@ -176,7 +188,9 @@ function InserterMenu(
 		return (
 			<>
 				<SearchControl
-					className="block-editor-inserter__search"
+					className={ clsx( 'block-editor-inserter__search', {
+						'is-scrolled': isScrolled,
+					} ) }
 					onChange={ ( value ) => {
 						if ( hoveredItem ) {
 							setHoveredItem( null );
@@ -219,6 +233,7 @@ function InserterMenu(
 		rootClientId,
 		__experimentalInsertionIndex,
 		isAppender,
+		isScrolled,
 	] );
 
 	const blocksTab = useMemo( () => {
@@ -332,7 +347,10 @@ function InserterMenu(
 			} ) }
 			ref={ ref }
 		>
-			<div className="block-editor-inserter__main-area">
+			<div
+				className="block-editor-inserter__main-area"
+				onScrollCapture={ handleScroll }
+			>
 				<TabbedSidebar
 					ref={ tabsRef }
 					onSelect={ handleSetSelectedTab }
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index b912e439ea293e..70105802296320 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -120,6 +120,16 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__search {
 	padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background-color: $white;
+	border-bottom: 1px solid transparent;
+	transition: border-bottom-color 0 linear;
+	padding-bottom: $grid-unit-20;
+	&.is-scrolled {
+		border-bottom-color: $gray-200;
+	}
 }
 
 .block-editor-inserter__no-tab-container {
@@ -138,7 +148,7 @@ $block-inserter-tabs-height: 44px;
 
 	display: inline-flex;
 	align-items: center;
-	padding: $grid-unit-20 $grid-unit-20 0;
+	padding: 0 $grid-unit-20;
 }
 
 .block-editor-inserter__panel-content {
@@ -224,7 +234,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
 	flex-grow: 1;
-	padding: $grid-unit-20;
+	padding: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;