Disable the top bar adhesion, for a more immersive and spacious browsing experience of video items.
Scene: Usage rate isn't particularly high for the top bar,which usually focuses on the search box.However,the top bar permanently occupies the entire top area,causing wasted space.We need to disable sticky behavior for the top bar,so that users can get more space and a deeper immersive experience when scrolling down to browse video projects.
Note: Disabling sticky behavior for the top bar doesn`t mean the top bar's functions can't be used.When users scroll to the top of the page,they can still see the top bar.
Conclusion: In my opinion,this feature will make the control panel for YouTube stand out,because it makes the YouTube interface very clean and immersive.
Thank you.
We already have this feature for full size theater mode, it slides down when you hover near the top of the screen or focus the search input by pressing /.
This an adjusted version which would apply to every video page regardless of the video mode:
/* Hide header */
#content.ytd-app:has(> #page-manager > ytd-watch-flexy[role="main"]:not([fullscreen])) #masthead-container #masthead {
transform: translateY(-100%);
transition: transform .15s ease-in !important;
}
/* Slide out after a short delay on hover */
#content.ytd-app:has(> #page-manager > ytd-watch-flexy[role="main"]:not([fullscreen])) #masthead-container:hover #masthead {
transform: translateY(0);
transition: transform .3s ease-out .35s !important;
}
/* Appear instantly when focused (e.g. press / to search) */
#content.ytd-app:has(> #page-manager > ytd-watch-flexy[role="main"]:not([fullscreen])) #masthead-container:focus-within #masthead {
transform: translateY(0);
transition: none !important;
}
/* Reclaim header space */
#content.ytd-app:has(> #page-manager > ytd-watch-flexy[role="main"]:not([fullscreen])) #page-manager {
margin-top: 0 !important;
}
One issue when not in theater mode is the bar doesn't have a background when it slides down because it doesn't need one when it's fixed in place: