How to "freeze" a part of a webpage/frame when scrolling?

[prtrtf]

Back in the day when I was first starting with HTML non-moving sections of a webpage were written in as frames. I have pretty much been away from web development for years and am only now trying to get back into it and write a page. What I'm finding is that frames really aren't used much anymore; at least they don't seem to be called that anymore.

The other thing I've been finding just in my own browsing, is that there is a different kind of behaviour now. Now when scrolling down a webpage, the entire page moves as one until the specific section (usually a side bar) hits the top of the page; then it stops while the rest of the page moves. This has become quite common in all sorts of pages.

What exactly is this called? Is it still frames or something else? Any tips in the right direction would be appreciated, though really I just need to know the name of the function and I might be able to figure it out from there...

Thanks!

 

[ronaldroe]

Could you link an example of what you're talking about?

Web code has come a long way since the days of frames. IIRC, the frame tag itself has been deprecated. Iframes are still used on occasion, but only in instances where there is literally no other viable, cross-browser alternative.

 

[Janja]

I think, you might be talking about a css style property of fixed? You can position elements as fixed so they never go out of the view.

Most widely used for background images if you have a full image as background..

 

[Edge]

We used the position: fixed property on this site http://www.bsgpf.org.uk/. We justified using it as the site was for a particular audience with low web experience so no expectations of how page elements should work. The video in the 'frozen' panel on the left explaining what the page was about was for people with low literacy levels so we didn't want it disappearing when users scrolled down as a voice would be coming from nowhere. This was a very specific case for a specific target group. Otherwise I'd be very wary about making pages that behave in unexpected ways. Usability studies show that in general users are happy to scroll up and down on the home page so normally I wouldn't recommend a fixed element. It can also create problems on smaller monitors if the fixed panel is too large.

 

[Phreaddee]

Not to mention the headaches you get from using fixed positioning on mobile devices!

 

[PixelPusher]

Not to mention the headaches you get from using fixed positioning on mobile devices!

Yep. Fixed position is a no go for iOS. You will need a work around/fallback for these devices.

 

[us0r]

I agree that the answer your looking for probably lies in CSS and possibly the "fixed" property. Check out http://www.w3schools.com/css/css_positioning.asp and see if it gives you some insight.

 

[prtrtf]

Thanks for the info...

Probably the best example of what I'm talking about is on the Google News homepage. On the left hand side is the "Top Stories". As you scroll down the page everything scrolls together until the title "Top Stories" reaches the top. At that point it no longer moves while scrolling, until the user scrolls back up to the top of the page and above the title's location...

Is that sort of what you guys are getting at or is this something else altogether?

I would be wanting to do something similar on a horizontal title bar, so that my navigation tabs are always visible on the screen when the user scrolls down.

 

[us0r]

Okay, I think I understand what your trying to do. The secret may lie in javascript. check this place out: http://www.jtricks.com/javascript/navigation/floating.html

 

[Edge]

Okay, I think I understand what your trying to do. The secret may lie in javascript. check this place out: http://www.jtricks.com/javascript/navigation/floating.html

It's not JS.
This is the code from the Google news site:

.pinning-enabled .left-nav-pinned {
    background: none repeat scroll 0 0 #FFFFFF;
    position: fixed;
    top: 0;
    z-index: 99;
}

Can I just encourage people to download and install firebug as an extension to Firefox and you'll be able to investigate things like this surprisingly easily.

 

[PixelPusher]

+1 Firebug
+1 Chrome Dev Tools
- 1 IE Developer Tools

A must for any accomplished web designer.

 

[us0r]

Can I just encourage people to download and install firebug as an extension to Firefox and you'll be able to investigate things like this surprisingly easily.

will do, thx

 

[ronaldroe]

It's not JS.
This is the code from the Google news site:

.pinning-enabled .left-nav-pinned {
    background: none repeat scroll 0 0 #FFFFFF;
    position: fixed;
    top: 0;
    z-index: 99;
}

Can I just encourage people to download and install firebug as an extension to Firefox and you'll be able to investigate things like this surprisingly easily.

You're right that JS doesn't keep it positioned, but there is JS involved. They use it to detect when the menu is at the top of the screen. At that point, the script adds the .left-nav-pinned class to the div.

Webdesignerwall.com uses a similar script to hide/show a back to top button. He explains it in this article: http://webdesignerwall.com/tutorials/animated-scroll-to-top

 

[prtrtf]

Is that actually all it is? It seems like there is something missing there...