Skip to content

feat: Add dynamic header background color change on scroll #139

Merged
heliocastro merged 1 commit intoeclipse-sw360:mainfrom
bipulsikder:feature/dynamic-header-background
Apr 4, 2025
Merged

feat: Add dynamic header background color change on scroll #139
heliocastro merged 1 commit intoeclipse-sw360:mainfrom
bipulsikder:feature/dynamic-header-background

Conversation

@bipulsikder
Copy link
Contributor

@bipulsikder bipulsikder commented Apr 4, 2025

Dynamic Header Background Color Change

This PR implements a dynamic header background color change that occurs immediately when scrolling starts, rather than waiting until reaching the main section. This improves visual consistency and readability of the header content while scrolling.

Changes

  • Added scroll event listener to handle navbar background changes
  • Implemented smooth transition for background color changes using CSS transitions
  • Added semi-transparent background with blur effect for better readability
  • Used the site's primary color with opacity for the scrolled state

Testing

  • Tested the header behavior on scroll
  • Verified smooth transitions between states
  • Confirmed readability of header content in all states
  • Tested across different viewport sizes

Screenshots

Before:

WhatsApp Image 2025-04-04 at 13 29 54

After:

Screenshot 2025-04-04 at 4 32 00 PM

…ll event listener, smooth transition, and semi-transparent background with blur effect
@bipulsikder
Copy link
Contributor Author

Could you please review this and let me know ! @GMishx @heliocastro @KoukiHama

@bipulsikder
Copy link
Contributor Author

Could you please review this and let me know ! @GMishx @heliocastro @KoukiHama

check my another Dynamic News page adjustments #135 .

@bipulsikder bipulsikder changed the title feat: Add dynamic header background color change on scroll - Add scro… feat: Add dynamic header background color change on scroll Apr 4, 2025
Copy link
Contributor

@heliocastro heliocastro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to go

@heliocastro heliocastro merged commit a253ba0 into eclipse-sw360:main Apr 4, 2025
4 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants