Fix #2069: Transparent top bar stops working when scroll.

js&css/extension/www.youtube.com/appearance/header/header.css

@@ -10,7 +10,41 @@
 html[it-header-transparent=true] ytd-masthead#masthead {background: transparent !important;}
 html[it-header-transparent=true] #background.ytd-masthead {background-color: rgba(230, 230, 230, 0.1) !important;}
 html[it-header-transparent=true] ytd-masthead[frosted-glass] #background.ytd-masthead {backdrop-filter: blur(1px) !important;}
-html[it-header-transparent=true] {  --ytd-searchbox-background: rgba(var(--ytd-searchbox-background), 0.5) !important;  }
+html[it-header-transparent=true] {  --ytd-searchbox-background: rgba(var(--ytd-searchbox-background), 0.5) !important;}
+
+/* Header-transparent alternative by @joaolscosta */
+/* Change opacity when scrolling down */
+html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0;}
+html[it-header-transparent-alternative=true] ytd-masthead #logo-icon,
+/* Hide country code when scrolling down */
+html[it-header-transparent-alternative=true][data-scroll-direction=down] #country-code,
+/* Hide the filter chips*/
+html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-feed-filter-chip-bar-renderer {display: none !important;}
+/* Define opacity for the icons */
+html[it-header-transparent-alternative=true] ytd-masthead #end {opacity: 1 !important; transition: opacity 2s ease;}	
+/* Show the voice search button when scrolled to the top */
+html[it-header-transparent-alternative=true] #voice-search-button {display: block !important; background-color: black !important;}
+/* TURN TOP BAR SEARCH BUTTONS BARELY VISIBLE */
+/* Make top header bar transparent */
+html[it-header-transparent-alternative=true] ytd-masthead,
+html[it-header-transparent-alternative=true] ytd-masthead #masthead,
+html[it-header-transparent-alternative=true] ytd-masthead #background,
+html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt,
+html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt-container,
+html[it-header-transparent-alternative=true] ytd-masthead #search-input input {opacity: 0.7 !important; background: transparent; box-shadow: none; border: none;}
+html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: transparent !important;}
+html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #search-input input,
+/* Make other icons barely visible */
+html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0.7 !important;}
+/* Make the entire search bar transparent with transparent border */
+html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: rgba(255, 255, 255, 0.5) !important; opacity: 0.7 !important;}
+/* Fill search button with black */
+html[it-header-transparent-alternative=true] ytd-masthead #search-icon-legacy {background-color: black !important; opacity: 1 !important;}
+/* Make chips filter bar barely visible */
+html[it-header-transparent-alternative=true] #chips-wrapper {opacity: 0.7 !important;}
+
+
+
 /*--------------------------------------------------------------
 # POSITION
 --------------------------------------------------------------*/

js&css/web-accessible/www.youtube.com/appearance.js

@@ -576,3 +576,55 @@ ImprovedTube.channelVideosCount = function () {
         xhr.send();
     }
 };
+if (ImprovedTube.storage.header_transparent2 === true) {
+    /*------------------------------------------------------------------------------
+    TURN TOP BAR TRANSPARENT WHEN SCROLLING
+    ------------------------------------------------------------------------------*/
+    window.addEventListener('scroll', function () {
+        var masthead = document.querySelector('html[it-header-transparent=true] ytd-masthead');
+        var endButtons = masthead.querySelector('#end');
+
+        if (window.scrollY === 0) {
+            endButtons.style.visibility = 'visible';
+        } else {
+            endButtons.style.visibility = 'hidden';
+        }
+    });
+
+    function handleScroll() {
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        var buttonsContainer = document.getElementById('buttons');
+
+        if (scrollTop > 100) {
+            buttonsContainer.classList.add('hidden');
+        } else {
+            buttonsContainer.classList.remove('hidden');
+        }
+    }
+
+    /*------------------------------------------------------------------------------
+    CHECK IF USER IS SCROLLING
+    ------------------------------------------------------------------------------*/
+    window.addEventListener("scroll", handleScroll);
+
+    function getScrollDirection() {
+        var lastScrollTop = 0;
+        return function() {
+            var st = window.pageYOffset || document.documentElement.scrollTop;
+            var scrollDirection = st > lastScrollTop ? 'down' : 'up';
+            lastScrollTop = st <= 0 ? 0 : st;
+            return scrollDirection;
+        };
+    }
+
+    var scrollDirection = getScrollDirection();
+
+    window.addEventListener('scroll', function() {
+        var direction = scrollDirection();
+        if (direction === 'down') {
+            document.documentElement.setAttribute('data-scroll-direction', 'down');
+        } else {
+            document.documentElement.removeAttribute('data-scroll-direction');
+        }
+    });
+}

menu/skeleton-parts/appearance.js

@@ -101,6 +101,10 @@ extension.skeleton.main.layers.section.appearance.on.click.header = {
 				component: "switch",
 				text: "transparentBackground"
 			},
+			header_transparent_alternative: {
+				component: "switch",
+				text: "Transparent background alternative"
+			},
 			header_hide_country_code: {
 				component: "switch",
 				text: "hideCountryCode",