Implement Sticky Header on Top of Website

## Description

We need to add a sticky (fixed) header to the top of the website so that the navigation bar remains visible as users scroll down the page. This will improve site usability and enhance the user experience, especially on long pages.

### Notes
If using custom CSS/JS, ensure it's added via child theme or via proper enqueuing.

### Proposal

Reference from original website:

https://github.com/user-attachments/assets/be8ace22-723a-409e-94d9-efc18314185d

### Task

- [x] Add custom-sticky.js file
- [x] Add the css to the style.css file
- [x] Add functions to the functions.php file
- [x] Add Limitations
- [x] Change the color of social links on scrolling
- [x] Change the site logo on scrolling
- [x] Add Screencast of Demo
- [x] [Change the color of the drop down menu](https://github.com/fossasia/codeheat.org/issues/368#issuecomment-3146637557) on scrolling