Experiment with position:fixed

UPDATE: I've added some javascript to adjust the position onscroll.

Note: This article was originally posted under the Long Way Down theme.

I've had this idea in my head for awhile and haven't had the time to implement it exactly how I wanted to. However, I did want to ask for some feedback on this idea that I had. For those of you reading this via your newsreader, come take a visit to the site.

For everybody but those using IE, you should notice that the comment box is located in the right hand column and uses position:fixed to force it to stay in place as the user scrolls the page. The reason why I like this idea is I've often found myself responding to an article or to another comment and having to scroll back and forth to formulate my response. By having the comment box available in this fashion, I'm hoping that I've made it easier for people to post comments on the site.

My initial concern is for users with lower browser resolutions as the content could appear off page with no way of accessing it. The other dilemma is that I had to find a location for the navigation that appeared in the right column. For now, I've simply moved it to the bottom of the page.

My preferred solution to this was actually to use JavaScript. Had I done so I could have:

  • only set the position to fixed once the page has been scrolled past a certain point, locking the div to the top of the page. This would also help minimize off-canvas issues with lower resolutions.
  • detected if the layer is appearing off-canvas so that the comment area could reside in its normal location underneath the content.
  • added support for IE.

What do you think of the concept? Does it help or harm the usability of the site?

Published April 25, 2005 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: http://snook.ca/s/357

Conversation

44 Comments · RSS feed
Cheryl Colan said on April 26, 2005

I love it. For me it helps the usability of the site. For longer articles it will be particularly useful. I can think of a few places I would love to implement it were I allowed. Love the color change with cursor focus as well.

Matthew Pennell said on April 26, 2005

Interesting idea (although I do confess that, after reading a post all about the new position of the comments box, I then automatically looked for it underneath the existing comments! - it's going to be quite a leap to unlearn that interface standard).

I would definitely do it with Javascript.

Bj?rn said on April 26, 2005

Great idea. I love it! When commenting on a specific statement in an article, you'll have the concerning text paragraph beside. It increases overview and therefore usability as well.

But there's a little problem in Firefox with 1024x768 and multiple tabs open. I can't get down to the send-button, it's out of the field of view. I must zoom out to see the options and send-button. I'll send you a screenshot, just send me a mail, if you need one.

Rob Mientjes said on April 26, 2005

Wow, neat stuff. My Fx scrolls with a lag, but that might just be my (for now) crappy Windows box :P

Anyway, really inventive. You seem to be the first to do this, so kudos to that.

Jacob Rask said on April 26, 2005

I love it! Makes much more sense than that crappy phpbb-stuff with a small iframe or something where you can scroll through the previous posts.

Nicolas Chachereau said on April 26, 2005

Could be great, but as Bj?rn already mentionned, I can't see the entire form with the default font-sizing. If I decrease the font-size, or make my window "full-screen" with F11, then I see it. I'm using Firefox with Windows 98 in 1024*768.

Apart from this technical concern, I have also a visual concern, because I didn't notice the form at first, and only when you pointed it out I saw it. I think this is a case of "navigation blindness", I was concentrating on the main content, and didn't look at the sidebar. You should maybe try to make it clear, also for newcomers who don't look at the sidebar because it's rather irrelevant in blogs. Maybe a strong color whould work, I dont' know.

As I type I see a third problem: it's so small, I like having longer lines... but maybe that's just me.

There are small glitches, but I think it would be very effective.

Jan said on April 26, 2005

It looks fine and works well with Safari on Mac OS X. Great idea. Why I haven't seen this before on any other weblog? Not a love on first sight, but on first scroll ;)

Feaverish said on April 26, 2005

I initially had Safari's window set to about 515px high, which cut off the bottom of the comment window. The problem is, the border underneath the "Comments" form makes it look like that's the end of the form, and I was looking around for the "Post" button before I figured out there was more underneath.

If the border enclosed everything ? comments, options, and preview/post buttons ? it would maybe be clearer that there was more information below.

Ben Kennedy said on April 26, 2005

I diggit.

Like a few other posters though, I have to laugh at myself: as soon as I was done reading the article, and the comments, my brain blanked for a fraction of a second while I looked around for the comment box. Weird huh.

May I use this opportunity to plug my photo blog, whose nav relies on position:fixed as well as alpha-transparent PNGs (read: it looks like sh!t in IE, but great in Firefox and Safari). Comments on the wisdom of this design are welcome.

Federico said on April 27, 2005

Using Opera 8, I have not enough vertical space so "submit" buttons remain hidden.
Apart from that, great idea :).

Khoi Vinh said on May 13, 2005

Ingenious and well-done. I think it makes perfect sense and it's also elegant. Really one of the best comment form implementations I've seen. Now if you just combine it with live previewing as you type, you'd leave every other comment form on the Web far behind.

Mark Boulton said on May 13, 2005

Like it a lot, really elegant. One problem is some funky things going with the cursor in Firefox on a mac, makes editing a post really tricky.

Gregory Dyke said on May 13, 2005

I have to agree with mark on this one: the my cursor isabout 15 pixels to the left of the actual letters... I'm using the ubuntu build of firefox 1.01

Natalie said on May 13, 2005

This is a fabulous implementation.

For me though, in Firefox/XP the cursor fo the text appears about 5 characters to the left of where I am actually typing.

Are you going to release this code under CC at all?

Julian Moffatt said on May 14, 2005

well done. very nice implementation of a tired old stand by.

post some data down to the road and let us know if this has increased your comment totals or not. I would imagine yes, but you never know.

perhaps, if you are so inclined, track the number of repetitive posts that appear under topics. I can see that being the only draw back with this implementation. People not reading and repeating already asked/answered comments more frequently than the regular group of non-readers who habitually skip the comments and ask anyway.

again, very well done. :)

Gilles said on May 14, 2005

Wow, why I didn't think of that before?

Bastiaan Terhorst said on May 16, 2005

Very, Very nice. However, horizontal scrolling moves the comment box out of its 'frame' :)

William said on May 16, 2005

Novel idea for the comment form. You can refer back to other comments or the actual post while posting a comment.

Too bad I didn't think of it first. I'll have to borrow this one for my next redesign perhaps.

said on May 17, 2005

k

Rich said on May 19, 2005

Very nice - but why didn't you fix the search and main nav as well?

Jonathan Snook said on May 19, 2005

Rich: I didn't fix the main nav (the one on the left) because it would have interfered with the comments and I didn't fix the nav on the right because I felt it was secondary content and didn't need any additional prominence by keeping it fixed while scrolling.

I had thought about keeping the search fixed but now that I have Live Search enabled, the search results had the potential to interfere with the secondary navigation. As a result, it's stuck where it is.

rai said on May 19, 2005

It works in IE6

Chris said on May 19, 2005

You win, man. One of the best ideas I've seen in a long time.

Jam said on May 19, 2005

great!

shoek said on May 19, 2005

Great form!

said on May 19, 2005

here's a crazy idea... highlight the comment the arrow beneath the form is pointing at and then do nested replies based on what the comment form is pointing at!

pulpus said on May 19, 2005

NEED TO STOLE THIS CODE!!!!!

GREAT WORK!

r0sk said on May 20, 2005

Humm, Im impressed bout the form, so kewl!

GGF said on May 21, 2005

Es solo una prueba a ver que

said on May 22, 2005

fgdfgdfgdfgdfg

An?nimo said on May 22, 2005

Probando esta maravilla

Chris Whiteley said on May 22, 2005

Very nice work.

fabien. said on May 24, 2005

Really great & clever idea. Works fine.

Dan said on May 24, 2005

Well this certainly is pretty nifty!

Glen C. said on May 24, 2005

Incredible. Perfect placement and perfect integration and usability. Good job.

Nicolai Schwarz said on May 24, 2005

Extremely cool. Can't wait to use this on my own site, if time allows a redesign.
It's really easier to respond to other comments. Next to its usefullness, it also has a nice side-effect. It draws the users attention to the comment-box. While other blogs just offer the possibilty to comment somewhere deep down the page, this box clearly says: Hello, here I am. Use me to comment on the text.
I've noticed Nicolas concerns about navigation blindness, but for me a fixed box is hard to overlook. If you feel the urge to scroll, that is.

said on May 25, 2005

ggggggggggggg

g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g

pni said on May 25, 2005

Nice idea, but It's slooooooooooooow on Mac + Firefox. After pressing the Page Down key, it takes well over one second (closer to two) before anything happens. Feels like torture. And yes, I have a double processor mac.

All position:fixed stuff slows down the scrolling radically. That's probably one reason why it isn't used that much (apart from the fact that IE doesn't support the feature).

Evil Mind said on May 25, 2005

Pues te quedo muy bien.

iOne said on May 26, 2005

It's powerfull! I love it

Albert said on October 12, 2006

Is anybody here i do not see anyone

gruzoperevozki said on February 10, 2011

Интересно написано, но мне кажеться я уже это где то видел...)))

Jamboree In The Hills said on February 16, 2011

Awesome post. Do you mind if I ask what your source is for this information?

freezer repair los angeles said on March 09, 2011

Hi there, I found your blog via Google while searching for first aid for a heart attack and your post looks very interesting for me.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.