diff --git a/packages/docs/src/en/plugins/intersect.md b/packages/docs/src/en/plugins/intersect.md
index 3176e549f..7f3dcc182 100644
--- a/packages/docs/src/en/plugins/intersect.md
+++ b/packages/docs/src/en/plugins/intersect.md
@@ -170,3 +170,12 @@ get a pixel value.
 ```alpine
 <div x-intersect.margin.-100px="visible = true">...</div> // Mark as visible when element is more than 100 pixels into the viewport.
 ```
+
+<a name="parent"></a>
+### .parent
+
+Allows for the underlying `IntersectionObserver` to use the viewport of the parent element, rather than the default, which is the browser.
+
+```alpine
+<div x-intersect.parent="shown = true">...</div> // Mark as shown when element is moves inside it's parents viewport.
+```
diff --git a/packages/intersect/src/index.js b/packages/intersect/src/index.js
index f955c4fce..b1f845cfd 100644
--- a/packages/intersect/src/index.js
+++ b/packages/intersect/src/index.js
@@ -5,6 +5,7 @@ export default function (Alpine) {
         let options = {
             rootMargin: getRootMargin(modifiers),
             threshold: getThreshold(modifiers),
+            root: modifiers.includes('parent') ? el.parentElement : null
         }
 
         let observer = new IntersectionObserver(entries => {