What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

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.

Let the downvoting continue...

share|improve this question
6  
There's a script that does this, Stackoverflow.com Enhancer –  Michael Mrozek Aug 8 '11 at 22:51
3  
That script doesn't work on IE, why we need a script? why it is not part of SO? this absolutely common in many websites. –  user185178 May 6 '12 at 7:14
21  
Because it's mostly obnoxious. The focus is on questions and answers. That bar just takes up space and gets in the way of seeing them. –  Cody Gray May 6 '12 at 8:02
2  
Every application is focused on what is shown in the main UI area. This is a void argument. Then let's remove the browser toolbars as well... The existence of the Enhacer script demonstrates that many users prefer the app bar frozen. –  user185178 May 7 '12 at 2:13
14  
@user Stack overflow is a website. It is not an application. It should behave like a website, and that means never grabbing part of my screen and pretending that it owns it. –  dmckee May 14 '12 at 23:08
3  
You've asked the question in the right place, but I don't feel the feature has a lot of value. For one, it's fairly easy to navigate to the top of the page without manually scrolling (e.g. on my Mac it's just Cmd+UpArrow, and I'm sure on Windows it can be done in a similar way). Second, I have yet come across one of these "sticky" elements that hasn't been absolutely annoying. Can you point to one that works well? –  Aaron Bertrand Aug 3 '12 at 19:33
    
@AaronBertrand Couldn't be easier on Windows: I just press Home. More for devil's advocate purposes than anything else, I will point out that the "action bar" on the new /review page (the one with the "accept," "close" and "not sure" buttons) is sticky. It doesn't come into play very often because mosts posts aren't that long. Or maybe it does, and I just can't tell because I orient my monitor vertically. –  Pops Aug 3 '12 at 19:40
1  
I'm sure this could be easily done with a userscript / user style sheet for those who really want it –  Pëkka Aug 3 '12 at 19:43
2  
@Pekka: Indeed it can be –  eldarerathis Aug 3 '12 at 19:48
1  
@Pekka this wont need a script, it can easly done with css. just need to be that element's css; position:fixed and top:0 –  Barlas Apaydin Aug 3 '12 at 19:52
    
And also many useful answers (keyboard shortcuts) at Toolbar with floating position. –  Arjan Aug 3 '12 at 19:54
1  
The person asked is getting -65 and person replying getting +114? For Feedback. Chocolate is imp then wrapper or both imp for both? –  hbdev ror Dec 6 '13 at 11:13
2  
I agree, this would be nice. –  elburzs Dec 22 '13 at 18:00
2  
For what it's worth, I've up voted this. I also agree the Stack Exchange / Stack Overflow toolbar should be fixed at the top of the screen. –  Charlie74 Dec 23 '13 at 22:55
2  
I am puzzled as to why people are so upset/offended at a feature that could be made to be optional. Simply default this option to be turned off (not fixed), and let those who wish to turn it on do so. That way those that don't want it, don't have to worry about changing a thing. As programmers we have the unique opportunity to make some great stuff, and here we are knocking other programmers for wanting to make the site more usable for some of the population? That doesn't sit right with me, especially since it could be optional. –  Sly Raskal Jan 2 at 4:20

6 Answers 6

up vote 20 down vote accepted
+100

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;
}

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):
screenshot

share|improve this answer
    
Thanks for the update, I'll try it out on my other machine when I get a chance. –  Lance Roberts Aug 7 '13 at 15:15
    
Do you think you can update the script now that we have the new top bar, and maybe just make the top bar stick? –  Lance Roberts Jan 6 at 14:46
    
@LanceRoberts Added my current stylesheet to the answer. –  Rob W Jan 7 at 13:37
    
@RobW, thanks, haven't got it to work yet, but I'll work on it more today. –  Lance Roberts Jan 7 at 13:52
    
I wasn't able to get it to work. I'm pretty weak on CSS, but was wondering if this code that their currently using needs to be modded: .topbar { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.86); height: 34px; width: 100%; } .topbar .topbar-wrapper { height: 34px; margin: 0 auto; position: relative; text-align: left; width: 980px; } Maybe the scroll part, or the position:relative on the .topbar-wrapper? –  Lance Roberts Jan 7 at 15:46
    
@LanceRoberts If you want to freeze the top bar, use this style sheet: pastebin.com/ub2kd0sf. Otherwise, if you only want to fix the inbox icon, use the code as shown in my answer. –  Rob W Jan 7 at 15:49
    
I just noticed that we need another z-index : 2000; (or similar) for the bar to be above e.g. the second code block in this answer (which has 1000). –  Raphael Jan 8 at 22:38
    
Also, MathOverflow was missing. Here's my version. –  Raphael Jan 9 at 8:26
    
I have encountered another issue: "scrollers" like e.g. the one when you ask a question, slides behind the top bar. Since it seems to be moved by JS (moveScroller()) there is probably little hope to fix that in CSS, isn't there? –  Raphael Jan 9 at 11:51
    
@Raphael It could be moved with CSS (e.g. with css transformations, transform: translateY(34px); ). But finding and dealing with all edge cases requires quite a lot of work. Since I'm only interested in the inbox button, I'll leave my answer like that, with the minimal implementation (without edge cases) of a floating top bar. –  Rob W Jan 9 at 13:10

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.

share|improve this answer
7  
mate its just got 33px height. –  Barlas Apaydin Aug 3 '12 at 19:42
23  
It would still bug me at 5px in height. –  Toomai Aug 3 '12 at 19:43
2  
@barlasapaydin why do you think the height is the part that people find annoying? –  Aaron Bertrand Aug 3 '12 at 19:43
    
okey, whatever, it was just a suggestion. –  Barlas Apaydin Aug 3 '12 at 19:47
4  
I hate them. I use too many slightly buggy browsers where I can't switch. Floating toolbars are a very common rendering problem for me; please never do this to my favourite website! –  AndrewC Aug 7 '13 at 7:06
    
Home is a one-way ticket; I need to get down to comment with my findings! –  Raphael Jan 6 at 11:12
3  
So that is what Home is for... –  Wikis Jan 6 at 15:03

(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.

share|improve this answer
1  
Thanks for the answer. Any idea why this question was downvoted??? –  GUI Junkie Aug 9 '11 at 7:05
3  
@GUI junkie, likely because people disagreed...voting is different on meta –  davidsleeps Aug 9 '11 at 9:51
    
how 20-30 pixels in height add more clutter? then a toolbar in all website add more clutter? toolbar are there to be accessed at any time by the user, whithough having to scroll. –  user185178 May 6 '12 at 7:16
1  
@JaimeOlivares By taking away 20-30 pixels of page space that doesn't really change. The toolbar has useful things sure, but nothing that really changes why you are on a particular page... –  davidsleeps May 6 '12 at 22:55
    
That's exactly why the toolbar is there. It shows you information of the global context, not of the current page. If it doesn't belong to the current page, it should not scroll. This is UI Design 101. –  user185178 May 7 '12 at 2:06
    
Moreover, there is no point in having a notification control (incoming emails) when the notification area won't be always visible. –  user185178 May 7 '12 at 10:47
    
@JaimeOlivares It might have changed, but the notification bar does not change whilst viewing a page. You couldn't just leave it open and receive notifications...(this may have changed though)... –  davidsleeps May 7 '12 at 22:21
    
@davidsleeps: It changed :) –  minitech Sep 11 '12 at 23:30

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.

share|improve this answer
    
lol i discover there is an userscripts for stack websites (: thanks. –  Barlas Apaydin Aug 3 '12 at 19:57
    
interesting, i might want to find/write one that does this for the voting arrows –  ajax333221 Aug 3 '12 at 20:13

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\\.com/.*"), 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;
    }
}
share|improve this answer
1  
Nice! In particular, good to know that Sylish does deal with RegExps; searching the web led to mostly negative answers. Two minor enhancements: 1) You are missing some sites, see Rob's answer. The sidebar on "Ask Question" moves behind the top bar. See here for a fix, if not a nice one. –  Raphael Jan 9 at 15:57
    
And, of course, this wreaks havoc on site without the new top bar (SE blog, chat, main portal). But let's hope that all these will be ported, eventually. –  Raphael Jan 9 at 16:12
    
@Raphael Thanks for the comments, I tried to include all sites that use the new top-bar now (not sure if I'm still missing some) and exclude chat/blog and SE portal. I'll edit the post with the updated style in a minute. –  3ventic Jan 9 at 16:21
    
Aaaand another bug: popup notices like "Welcome back! You have been logged in." are hidden behind the top bar since it only has z-index: 250;. Of course, adding div#overlay-header { z-index : 1001 !important; } solves the issue. –  Raphael Jan 15 at 13:51
    
@Raphael I noticed and added that a while ago as well. –  3ventic Jan 27 at 15:49

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.

share|improve this answer
4  
I don't understand the 'I use it in Excel - a desktop application - so it should be available in everything else' stance you seem to be taking. Also, I don't see how it would be more 'efficient and usable'. If anything it would be less efficient and usable as anything happening in that toolbar would distract you from writing your answer. Real-world example: If I'm trying to read something that requires thought and mid-way through my reading someone comes and drops a big envelope on my desk, that would be distracting. But if they wait until I've finished reading to do so that's acceptable. –  JonW Aug 5 '13 at 15:03
1  
@JonW, I certainly didn't mean that everything in Excel should be available, this is just such an obviously useful feature that anyone who does a lot of Excel work will understand. One of the most irritating things about use the SE sites is having to scroll back up to the top all the time. –  Lance Roberts Aug 5 '13 at 15:21
6  
Have you tried the “Home” key? –  minitech Aug 7 '13 at 5:04
2  
What is there in the top bar that's so important that it needs to be constantly visible no matter where you are on the page? It's just a bunch of links. –  Toomai Aug 7 '13 at 18:41
1  
@Toomai, A) I'm constantly getting notifications so I want the notification dropdown box visible always, B) If I see a rep change I usually check out what has changed, so I need my username link visible for that, C) Suggested Edit flags appear in that bar, and I always take care of those I can, D) The 'review' button is in the bar and I check that a lot. I'll edit all that into the answer. –  Lance Roberts Aug 7 '13 at 18:44
1  
I'm with @LanceRoberts on this, I'd like to see my status w/o scrolling. –  egur Jan 14 at 14:26
    
Facebook users begone! This is not a social networking platform. –  bjb568 Mar 20 at 21:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .