Red banner appears at top whenever scrolling up

Site Feedback
1

This is a real nuisance, especially when trying to read something on the screen as it will cover up information, and then there is the unwanted movement on the screen. Is there a browser setting that can disable this undesired functionality? Surely if there is a need for what is on the banner I can scroll to the top of the page and see it that way.

I ran into this while studying the Blog Tutorial but I see this problem on many websites now. Popular with the kids I suppose? Anyone want to explain the benefits?

I noticed later that someone already mentioned this: “Red top menu on documentation site flipping in and out of view” and another one too: “The giant crimson menace from above”

2

This behavior is not browser based.
The website is build with the intention to do this.

You’re free to do a PR to change this behavior:
cakephp/cakephp.org

3

I asked the same thing three years ago, nearly to the day. Nothing has been done with it. Another case of “It’s designed that way and we can’t be bothered to fix 2 lines in CSS” while it probably annoyes quite a few people. Responsive design yes, things sliding around constantly no.

1 Like
4

Assuming that it was designed that way, there’s no “2 lines in CSS” to fix. Fixes are for things that are not working as designed…

5

Using Brave browser here’s my solution to slaying the red monster. Right click the evil perpetrator, go Brave > Block element by selector.

It won’t identify it, but we can kill the class which activates on scrolling up (which is also triggered by a Ctrl+F search which wraps the page!). What we put in the box is “header.nav-down” and refresh the page.

You could also use “.hidden-sm.hidden-xs.container-fluid” or even “.hidden-sm.hidden-xs.container-fluid > row”.

It’s not completely clean, it does kill the top banner always, and scrolling up now wipes the lot out, but scrolling down will bring back the search, language and version. If there’s a way of preventing the event setting the nav-down class to the header that would be the way to go, not wiping out the banner completely! Or just clearing the nav-down class.

For Chrome users you just pick it for blocking with the uBlock extension.

Once done you’ll need to navigate back to https://cakephp.org/ to view the banner. You may also wish to repeat this process for the API site too. All the links in the banner are also at the bottom of the page, which is handy.

Sanity restored.

Here is the offender: -
https://book.cakephp.org/4/en/_static/app.js

function hasScrolled() {
var st = $(this).scrollTop();

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
    return;

// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
    // Scroll Down
    $('header').removeClass('nav-down').addClass('nav-up');
} else {
    // Scroll Up
    if(st + $(window).height() < $(document).height()) {
        $('header').removeClass('nav-up').addClass('nav-down');
    }
}

lastScrollTop = st;

}

Someone please set delta to a few billion or so, thanks :slight_smile:

Actually, what needs changing is: -
if(st + $(window).height() < $(document).height()) {
to
if(st == 0){
which’ll restore it when back at the top of the page.

Sorry for the bump on this old topic, but as this conversation has been going on for several years on various threads I figured it wasn’t going away any time soon.