Creating a web content portal that always stays at top of browser window

[Nick Lindberg, modificado hace 12 años.]

Happy friday!

So first off, I've searched extensively for this and I apologize if the answer is either simple or has eluded me simply because I don't know what to search for. Here is what I'm trying to do. (Mind you, I'm a C/C++ modeling/simulator programmer who has picked up HTML/Javascript/Liferay at a whim here in the last 2 months because our small non-profit company needs a new website... so bear with me.)

I have a page with a 2 column (30/70) layout. I have a navigation bar in the first column (30%), with anchor links to content in the 2nd column (70%) but the navigation portlet is maybe, lets say, 10 lines of text, whereas the content in the right column is hundreds of text-- so naturally when you scroll down, the navigation bar disappears almost immediately.

I am trying to figure out how to keep the navigation web content portal to always stay at the top of the browser window. For example, when I click on a link currently it will scroll the entire page down to the portion of content containing the anchor, as it should-- but this gets rid of the navigation portlet and I'd like to kind of keep it there.

I've seen webpages before that have figured this out (or at least I think I have) where the navigation portal (or in non-liferay sites, navigation "bar") kind of floats down with you as you scroll or jump down the page, and that's what I'm trying to figure out.

From a coding perspective, I suppose you would explain it sort of like it having a maximum height/position within the theme or column, where it won't go above the theme navigation bar at the top of the page, but then if you scroll down, it will not go off the page but stay at the very top-- almost as if that first 30% column were on wheels anchored to the top theme navigation bar. I hope that makes sense.

Anyways-- I really can't figure this out, but thought that since I've seen it before, there might be something I could throw in to the layout that makes that column "greased" so to speak, or something with the CSS of the portlet that allows it to stay floating always at the top of the window.

As an example, take:

http://www.liferay.com/documentation/liferay-portal/6.1/user-guide

Since our website is based roughly on the design and layout of Liferay's (I know, but it's clean and I am not a web designer) scroll down on that page and notice how, as you'd expect, the navigation on the left scrolls up with the rest of the content so that it slowly disappears off the page as you get to the bottom. I want to make it so that once it reaches the very top of the browser window, it stops scrolling up off the screen.

Anyways-- this might be an outrageous or stupid request, in which case, I'm sorry.

Thanks community!

[David H Nebinger, modificado hace 12 años.]

Well, you could go to the Look and Feel for the portlet from the config menu, choose "Advanced Styling", click on the "Add a CSS rule for just this portlet" link, then enter CSS within the brackets like:

  position: fixed;
  top: 50;
  left: 25;
  z-index: 2;

This will keep the content in the same position regardless of scrolling. I'm sure there's a fancier way to accommodate positioning so it doesn't just stay in one place regardless of scroll position (i.e. stay in normal spot when at top of the screen but allow it to move within a few pixels from the top when you scroll down), but it will work...

[Vilmos Papp, modificado hace 12 años.]

I would suggest to check how the top bar solves this by switching the pin on the left side.

[David H Nebinger, modificado hace 12 años.]

It does it the same way, but it works because it is always at the top of the screen.

For a window that starts somewhere down on the page before scrolling starts but moves to the top of the screen after scrolling would take some javascript magic, I believe, and won't be as simple an implementation as the CSS-only implementation...

[Nick Lindberg, modificado hace 12 años.]

David H Nebinger:

It does it the same way, but it works because it is always at the top of the screen.

For a window that starts somewhere down on the page before scrolling starts but moves to the top of the screen after scrolling would take some javascript magic, I believe, and won't be as simple an implementation as the CSS-only implementation...

OK-- that makes sense. I think it will be enough for me to nail this thing in one spot and have it sit there. I will see if I can get that to work.

Javascript magic might be the next step if I'm feeling bold...

Thanks everybody. This has been incredibly helpful.

[Nick Lindberg, modificado hace 12 años.]

Nick Lindberg:

David H Nebinger:

It does it the same way, but it works because it is always at the top of the screen.

For a window that starts somewhere down on the page before scrolling starts but moves to the top of the screen after scrolling would take some javascript magic, I believe, and won't be as simple an implementation as the CSS-only implementation...

OK-- that makes sense. I think it will be enough for me to nail this thing in one spot and have it sit there. I will see if I can get that to work.

Javascript magic might be the next step if I'm feeling bold...

Thanks everybody. This has been incredibly helpful.

Well, the fixed position CSS block did the trick. Then I stumbled across this:

http://css-tricks.com/scrollfollow-sidebar/

My question now is this-- and given my background in C/C++, maybe I am thinking about this the wrong way, but... in terms of including javascript within a portlet, what's the best way to go about it? In the past, with previous portlets I've done using Javascript (namely aui-carousel and aui-scrollbar) I just include the script block from within the source code CK editor in the web interface. I've read stuff like this:

http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/using-jquery-or-any-javascript-library-in-liferay-6-0

and I guess my question is, if I want to write and include some javascript like the JQuery scrollfolow-sidebar in the above link, would it be easiest to just include a javascript block from within the source code of the portlet itself? Othewrise I'm not really sure how to reference the javascript, since that example actually refers to the portlet ID.

(mine is #p_p_id_56_INSTANCE_jgcNFrVPSfJ0_)

Anyways. I thank you all for your help. I'm just trying to learn. I understand and like the way CSS works, it's much akin to classes and inheritance in C++ and jives with my way of thinking. Now I'm just trying to figure out how to piece together javascript from within a Liferay framework, and beyond adding .js files to my theme, which I saw how to do in Nate's post, how would I sync up the scrollfollow-sidebar bit with my web content portlet?

Thanks again--
Nick

[David H Nebinger, modificado hace 12 años.]

I'd approach this in two ways:

1. Add the jquery code as a javascript file in the theme. Makes it globally accessible.

2. Invoke the jquery code through the portlet, leverage the class selector (along w/ your portlet class) to apply the plugin to your portlet.