✨ Add scroll-effect (shadow) to header bar

modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss

@@ -8,6 +8,7 @@
 
 	box-shadow: 0 -1px 0 0 $color-gray-300 inset;
 	background: var(--ppcp-color-app-bg);
+	transition: box-shadow 0.3s;
 
 	--wp-components-color-accent: #{$color-blueberry};
 	--color-text: #{$color-gray-900};
@@ -78,6 +79,10 @@
 		}
 	}
 
+	&.is-scrolled {
+		box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85,93,102,.3);
+	}
+
 	@media screen and (max-width: 480px) {
 		padding: 24px 35px;
 

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js

@@ -2,16 +2,23 @@ import { Button, Icon } from '@wordpress/components';
 import { chevronLeft } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
+import classNames from 'classnames';
+
 import { OnboardingHooks } from '../../../../data';
+import useIsScrolled from '../../../../hooks/useIsScrolled';
 
 const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
 	const { title, isFirst, percentage, showNext, canProceed } = stepDetails;
+	const { isScrolled } = useIsScrolled();
 
 	const state = OnboardingHooks.useNavigationState();
 	const isDisabled = ! canProceed( state );
+	const className = classNames( 'ppcp-r-navigation-container', {
+		'is-scrolled': isScrolled,
+	} );
 
 	return (
-		<div className="ppcp-r-navigation-container">
+		<div className={ className }>
 			<div className="ppcp-r-navigation">
 				<div className="ppcp-r-navigation--left">
 					<Button

modules/ppcp-settings/resources/js/hooks/useIsScrolled.js

@@ -0,0 +1,44 @@
+/**
+ * Taken from WooCommerce core:
+ * https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/client/admin/client/hooks/useIsScrolled.js
+ */
+
+import { useEffect, useRef, useState } from '@wordpress/element';
+
+const isAtBottom = () =>
+	window.innerHeight + window.scrollY >= document.body.scrollHeight;
+
+const useIsScrolled = () => {
+	const [ isScrolled, setIsScrolled ] = useState( false );
+	const [ atBottom, setAtBottom ] = useState( isAtBottom() );
+	const rafHandle = useRef( null );
+	useEffect( () => {
+		const updateIsScrolled = () => {
+			setIsScrolled( window.pageYOffset > 20 );
+			setAtBottom( isAtBottom() );
+		};
+
+		const scrollListener = () => {
+			rafHandle.current =
+				window.requestAnimationFrame( updateIsScrolled );
+		};
+
+		window.addEventListener( 'scroll', scrollListener );
+
+		window.addEventListener( 'resize', scrollListener );
+
+		return () => {
+			window.removeEventListener( 'scroll', scrollListener );
+			window.removeEventListener( 'resize', scrollListener );
+			window.cancelAnimationFrame( rafHandle.current );
+		};
+	}, [] );
+
+	return {
+		isScrolled,
+		atBottom,
+		atTop: ! isScrolled,
+	};
+};
+
+export default useIsScrolled;