Comments on: Sticky Floating Navigation

By: Jakub Linowski

Jakub Linowski — Tue, 06 Jul 2010 15:34:05 +0000

Some nice examples you all found! Thanks for sharing the links. I've noticed a few superior examples (faded and narrower than the column width) which tackle the issue of mistakenly making the scroll bar "feel as if it's broken".

@Jarrod. I'd say when the need arises for a larger visible screen area, these floating navigation could potentially collapse on mouse out.

@John Beckett. The floating footer could be useful when you have long scrolling pages and a multi step process. In my case I wanted to show very visibly a critical element such as the continue / submit button in a consistent location.

By: NICCAI

NICCAI — Fri, 02 Jul 2010 19:15:33 +0000

Check out the nav for vowsjs - reminded of this article. http://vowsjs.org/

By: Andrew Searles

Andrew Searles — Fri, 02 Jul 2010 13:29:20 +0000

I saw this and thought of this new trend in web design to have all your content on the home page but then create a navigation that scrolls the browser to the desired content. For example, http://www.blueskyresumes.com/about-us/#our-team. I also thought of those gallery sliders that are like blinds back and forth. (ex. http://www.ohwrite.co.uk/files/slinkySlider/demo.... What if you were to flip that example vertically and each bar would be a link to the content one long page. And if you were to scroll through this long page each bar would be fixed to the header of the content as it scrolled past. Some interesting stuff.

By: pixelpraque

pixelpraque — Thu, 01 Jul 2010 11:48:33 +0000

A similar pattern has been used to persist the gadget dock in the viewport on http://www.ziggo.nl. The footer is only revealed when you scroll down to the bottom of the page.

By: jopas

jopas — Thu, 01 Jul 2010 06:42:34 +0000

Hi Jakub, that's an interesting concept!

I recently noticed The Next Web doing something very similar with their "Quick Comment" panel on the left hand side: http://thenextweb.com/eu/2010/07/01/today-finland…

It certainly seems like an emerging design pattern so I reckon we should come up with a descriptive name – anyone? :)

Cheers, Jussi

By: pjbfcp

pjbfcp — Thu, 01 Jul 2010 03:00:45 +0000

I like it. I think that this could eliminate the "Back to Top" link. For example a blog with infinite scroll could benefit from having an element which would provide the global navigation. I can also imagine it as an ecommerce cart. If products were drag-n-drop it could provide a unique shopping experience. I agree that the footer seems odd.

By: John Beckett

John Beckett — Wed, 30 Jun 2010 20:44:09 +0000

I like the concept, but I am a little lost as to why you would want a footer visible all the time. It seems to be counter to what the point of putting something in the footer is in the first place.

Overall a very nice feel and has potential.

By: Jarrod

Jarrod — Wed, 30 Jun 2010 19:24:37 +0000

I like the idea of having some information accessible no matter where I'm at on the page, but I prefer to have the largest area possible when viewing the content. For this reason, I don't like the fact that the Help tab hovers above the content. I'd like it better off to the side.

And is there really any content in the Footer that's so important as to cover up that much of your main content? I tend to use my Footers as a site map with a quick link to many areas of my site, but if I've got a link that's that important it probably shouldn't be in the Footer in the first place (or at least not only in the Footer).

By: Heathplosion

Heathplosion — Wed, 30 Jun 2010 15:42:07 +0000

I am doing a redesign at the moment and I've been looking at options like this. In fact I've been thinking about this a bit too much... My biggest concern is by having bands/bars locked to the top and/or bottom of the window we're restricting the users potential viewport size. I get annoyed at the diggbar, stumbleupons bar, and other sites with sticky elements. I've seen sites that ruin the sense of scrolling by having far too much content stay fixed. It makes it feel like the scroll bar is broken. Or that the giant scrollbar on the right of the browser is only affecting one small content area on the page. Also we've been fighting this war against 'Above the fold mentality'. Are we shooting ourselves in the footer if we start glueing content, that users *will* scroll to, to the fold itself? If content flows past the fold, it's a great visual cue that the user can scroll down. By having the footer at the bottom of the page, it could confuse users into thinking that's all there is. As for your prototype I think the help button works well, and if there's some navigation elements in the footer that you do want always visible move them to the top like the help button. Two nice examples: http://www.calicott.com/ http://davidwalsh.name/persistent-header-opacity (I liked the added reduction of opacity on the second one)

By: Haruspex

Haruspex — Wed, 30 Jun 2010 15:03:05 +0000

OK Cupid has been doing this with advertisements at the bottom of their left-hand bar. The ad is typically at the bottom of the bar, but as you scroll past that bottom bar, the ads float down with you.