LogoLogo
  • Introduction
  • Early Access
  • System Requirements
  • Elements FAQ
  • Purchasing FAQ
  • Licensing FAQ
    • License Types
  • Why Elements?
    • Static Website Benefits
    • Build a Digital Garden
  • Community Forum
  • Marketplace
  • Elements App
    • Getting Started
    • Keyboard Shortcuts
    • Design System
    • Editor
      • Apple Intelligence
      • Component Inspector
      • Dark Mode
      • Node Browser
      • Page Manager
      • Preview
      • Resources
      • Responsive Breakpoints
      • Workspaces
    • Components
      • Built-in Components
        • Accordion
        • Background
        • CMS
          • Twig Syntax
          • CMS Online Editor
        • Button
        • Container
        • Divider
        • Dropdown
        • Flex
        • Filter
        • Filter Tags
        • Form
        • Gallery
        • Grid
        • Image
        • Menu
        • Modal
        • Modal Close
        • Reveal
        • Image Slider
        • SVG
        • Text
        • Top Pages
        • Typography
        • Video
      • Common Controls
        • Link
        • Layout
        • Sizing
        • Spacing
        • Transitions
        • Effects
        • Filters
        • Transforms
        • Borders
        • Advanced
      • Custom Components
    • Templates
      • Global Templates
    • Site Settings
      • Template
      • Publishing
    • Theme Studio
      • Theme
      • Colors
      • Screens
      • Font Family
      • Font Size
      • Spacing
      • Shadows
      • Border Width
      • Border Radius
      • Typography
    • How to
      • Add an Icon Inside a Button
      • Adjust Smooth Scroll Speed
      • Apply Anchor Scroll Padding
      • Add Snow to your Website
      • Build a Sticky Menu
      • Center Align Components
      • Create a Card
      • Site Banner with Text
      • Make a two column layout
    • Resources
    • Troubleshooting
    • SEO
    • Robots.txt
    • Advanced
      • URL Scheme
  • Elements Language
    • Introduction
      • Getting Started
      • Component Styling
    • Element Pack
      • info.json
      • Components
        • info.json
        • Icons
        • Properties.json
          • Grouping Controls
          • Default Values
          • General Structure
            • Title
            • ID
            • Format
            • Visible
            • Enabled
            • Responsive
          • UI Controls
            • Divider
            • Heading
            • Image
            • Information
            • Link
            • Number
            • Resource
            • Segmented
            • Select
            • Slider
            • Switch
            • Text
            • Text Area
            • Theme Border Width
            • Theme Border Radius
            • Theme Color
            • Theme Font
            • Theme Spacing
            • Theme Shadow
            • Theme Text Style
            • Theme Typography
        • Templates
          • Portal
          • Backend
          • Conditional Statements
          • Regular Expressions
          • Looping
          • Includes
          • Image Resources
          • HTML
            • Anchor
            • Raw
            • Editable Content
            • Dropzones
            • Inline templates
          • CSS
          • JavaScript
        • Assets
        • Hooks.js
          • Common use cases
          • Passing data to templates
          • Working with Collections
          • Working with UI Controls
          • Working with Resources
          • Available Functions
            • rw.addAnchor
            • rw.getBreakpoints
            • rw.getBreakpointNames
            • rw.getResponsiveValues
            • rw.resizeResource
            • rw.setProps
            • rw.setRootElement
          • Available Data
            • rw.collections
            • rw.component
            • rw.node
            • rw.pages
            • rw.project
            • rw.props
      • Collections
        • Data collections in Hooks.js
        • Accessing Data in Templates
        • Collections in properties.json
      • Shared Files
        • Assets
        • Templates
      • Themes
    • Troubleshooting
  • Elements Cloud
    • Getting Started
    • Troubleshooting
  • Elements Store
    • Getting Started
    • Add-on Guidelines
  • Branding
    • Logotype
    • Logotype Animated
    • Icon
  • Legal
    • Subscription Terms of Service
    • Cloud Terms of Service
    • Frameworks
Powered by GitBook

We are Realmac Software. We make nice things.

On this page
  • Advanced Sticky Menu Tutorial - Part 2
  • Code Examples

Was this helpful?

Edit on GitHub
Export as PDF
  1. Elements App
  2. How to

Build a Sticky Menu

How to make a sticky menu and change it's visual properties on scroll

PreviousAdd Snow to your WebsiteNextCenter Align Components

Last updated 3 months ago

Was this helpful?

To make a menu sticky, you need to put the menu and all contents in a container (site wrapper) along with making the following changes to the menu settings:

Layout > Position set to Sticky.

Layout > Z-Index > Custom set to 100.

Layout > Type > Uniform > Inset 0.

Watch the following tutorial to see how to build a Sticky Menu, along with adding a drop shadow and frosted glass effect.

Advanced Sticky Menu Tutorial - Part 2

In this advanced tutorial we use some Javascript to adjust the look of the menu when the user scrolls down the page.

Code Examples

Adding and Removing Standard CSS Classes:

<script>
	const menu = document.getElementById('fancymenu');
	window.addEventListener('scroll', () => {
	  if (window.scrollY > 800) {
		menu.style.setProperty("width", "100%");
		menu.style.setProperty("height", "80px");
		menu.style.setProperty("margin-top", "0");
		menu.style.setProperty("background", "#ffffff");
	  } else {
		menu.style.removeProperty("width");
		menu.style.removeProperty("height");
		menu.style.removeProperty("margin-top");
		menu.style.removeProperty("background");
	  }
	});
</script>

Adding and Removing Tailwind Classes:


	<script>
	const menu = document.getElementById('fancymenu');
	window.addEventListener('scroll', () => {
	  if (window.scrollY > 500) {
		menu.classList.add('w-auto');
		menu.classList.remove('w-[1000px]', 'mt-10');
	  } else {
		menu.classList.add('w-[1000px]', 'mt-10');
		menu.classList.remove('w-auto');
	  }
	});
 </script>

You can in Elements.

click here to open the Space Demo Project