Should the top navigation be frozen (optional)?

Question

In Excel, the window can be frozen in place in such a way that you can always see the name of the column even though you go way down below the 'fold' of the screen.

On SE, when you scroll, the whole page goes up (or down). This means the top navigation bar is scrolled off screen. I'm not sure if it would be a good idea or not to fix the top navigation to the top of the screen and let the rest of the content scroll.

What do you think about this, in terms of pros and cons?

[Update]

With the new Top navigation bar, kudos to the design team, I think this question becomes relevant again. I'm aware of the busload of downvotes, but still.

The top navigation bar doesn't occupy much space and has two notification areas:

• Inbox
• Achievements

Having these two notifications visible at all times would be nice, IMO.

[Update]

I've just noticed that I haven't used the word "optional" in this discussion... My bad. In Excel, the Freeze function is controlled by the user. You can optionally Freeze part of the interface, and you can eliminate the Freeze at will.

Answer 1

I myself use the following home-brewed User stylesheet (in conjunction with Stylish). I don't need the whole bar to stick to the top, only the StackExchange™ MultiCollider SuperDropdown™, for inbox messages.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain('stackoverflow.com'),
               domain('stackexchange.com'),
               domain('superuser.com'),
               domain('serverfault.com'),
               domain('stackapps.com'),
               domain('askubuntu.com'),
               domain('mathoverflow.com'),
               domain('answers.onstartups.com') {
  /* old StackExchange top bar, e.g. on stackexchange.com */
  #portalLink {
      position: fixed;
    /*left: 22px;/* Uncomment to stick to the left */
      background-image: -moz-element(#custom-header) !important;
      background-size: 1px !important;
      background-repeat: repeat !important;
      padding: 8px 6px 6px 16px !important;
      margin: -2px 0 0 -22px !important;
      border-radius: 5px;
  }
  /* Stick inbox to the left side of the page */
  .topbar .icon-inbox {
      position: fixed !important;
      left: 0;
  }
  .topbar .inbox-dialog {
      position: fixed !important;
      left: 0 !important;
  }
}
@-moz-document url-prefix('https://stackexchange.com/'),
               url-prefix('http://stackexchange.com/') {
    #portalLink {
        background-image: -moz-element(#topBar) !important;
    }
}

If you want to stick the whole top bar to the top, replace the two .topbar { ... } rules with:

body {
    padding-top: 34px; /* reserve height of .topbar */
}
.topbar {
    position: fixed !important;
    top: 0;
    z-index: 999;
}

To eliminate the need for hard-coding colors, I'm painting the background using the -moz-element CSS property.

Here's how it looks like with the default stylesheet (notice the StackExchange inbox at the upper-left corner):

Answer 2

Show of hands: How many people loathe headers and footers that follow you around as you scroll?

The header isn't even that useful when you're reading a long page, and you can always press Home to warp to the top.

Answer 3

(IMHO) I think it's not the best idea... It just adds noise/clutter when you don't need it whilst you've scrolled to view Question/Answer content. It's easy enough to get back to the top anyway.

As Michael Mrozek pointed out, there is an add-on that provides this functionality which after reviewing only confirms to me that I would not want such a feature... But at least it is an option for people who do want that — I can see why it would be useful, just that I'd want a clearer picture when scrolling.

Answer 4

I made a userstyle for the new top-bar to stick it to the top:

@-moz-document regexp("https?://((?:(?!blog|chat|area51).)+\\.)?stackexchange\\.com/.*"), regexp("https?://(?:(?!blog|chat[^.]*).)*stackoverflow\\.com/.*"), regexp("https?://(?:(?!blog|chat).)*superuser\\.com/.*"), regexp("https?://(?:(?!blog|chat).)*serverfault\\.com/.*"), regexp("https?://(?:(?!blog|chat).)*mathoverflow\\.net/.*"), regexp("https?://(?:(?!blog|chat).)*stackapps\\.com/.*"), regexp("https?://(?:(?!blog|chat).)*askubuntu\\.com/.*") {
    body .topbar,
    body #topbar {
        position: fixed;
        top: 0;
        z-index: 1000;
        font-size: 12px;
        width: 100%;
    }
    body > .page,
    body .container,
    div.wrapper > header {
        padding-top: 34px;
    }
    body .custom-header,
    body #custom-header,
    div#scroller,
    div.review-bar {
        top: 34px !important;
    }
    div#custom-header {
        margin-top: 34px;
    }
    .new-topbar .container {
        background-position: center 0;
    }
}

Answer 5

Although this feature isn't built in (and I understand why people dislike it) there's actually a userscript that does this that you can use instead. It's not 100% bulletproof, but in general it'll work. Actually, it turns out there's a second one as well.

Answer 6

As of February 2017 such feature is available on Stack Overflow, as announced here.

The top bar is sticky by default, and it can be turned off in the Edit Profile page.

As confirmed by the project manager of the team, the sticky top bar will be implemented network wide during the second half of 2018.

Answer 7

A frozen top bar would be great. It really sucks right now having to scroll back up every time you dive into a question. I work a lot in Excel and any kind of heavy spreadsheet work usually involves freezing the top row (or leftmost column).

Some of the useful things in the top bar:

• I'm constantly getting notifications so I want the notification dropdown box visible always
• If I see a rep change I usually check out what has changed, so I need my username link visible for that
• Suggested Edit flags appear in that bar, and I always take care of those I can
• The 'review' button is in the bar and I check that a lot

It would make the site more efficient and usable, thereby giving more time to process Q & A.