35

I am working on new layout of my site & I come across GIZMODO site, I found that the site can make use of page scroll bar to scroll part of the contents in the site. How can they make it ? I studied their CSS via Firebug, but I am quite confused.

Here is my testing page 1 : http://raptor.hk/dev/theme/dummy.html (this page can center the contents, but cannot scroll as I want)

Here is my testing page 2 : http://raptor.hk/dev/theme/dummy2.html (this page can scroll as I want, but cannot center)

I just want to make the page with left side content scrolling with page scroll bar, but right side content stays in the original position, plus the whole site should align center, i.e. combining my testing page 1 & 2. Can anyone give me some lights?

Raptor
  • 53,206
  • 45
  • 230
  • 366

6 Answers6

44

Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.

So you want:

  • A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
  • The main content at the left which is vertically scrollable by the browser's main scroll bar,
  • A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.

See this demonstration fiddle which does all that.

The style sheet:

html, body, * {
    padding: 0;
    margin: 0;
}
.wrapper {
    min-width: 500px;
    max-width: 700px;
    margin: 0 auto;
}
#content {
    margin-right: 260px;  /* = sidebar width + some white space */
}
#overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}
#overlay .wrapper {
    height: 100%;
}
#sidebar {
    width: 250px;
    float: right;
    max-height: 100%;
}
#sidebar:hover {
    overflow-y: auto;
}
#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}

And the markup:

<div class="wrapper">
    <div id="content">
    </div>
</div>
<div id="overlay">
    <div class="wrapper">
        <div id="sidebar">
        </div>
    </div>
</div>

Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.

I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.

Update

If I understand your comment correctly, then you want to prevent scrolling of the main content when the mouse is over the sidebar. For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.

I think this new demo fiddle does what you want:

<div id="wrapper">
    <div id="content">
    </div>
</div>
<div id="sidebar">
</div>
Community
  • 1
  • 1
NGLN
  • 43,011
  • 8
  • 105
  • 200
  • The 2nd demo fiddle is very close. How to make right sidebar scrolling (but not the whole page) when I mouseover the right sidebar & scroll with mouse wheel? Does it really have to do with JavaScript ? – Raptor Aug 07 '11 at 01:22
  • 2
    See my update. And compare that fiddle with [this one](http://jsfiddle.net/NGLN/qndjW/12/) which has a slightly different mouse leave behavior of the sidebar. – NGLN Aug 07 '11 at 02:53
  • I am trying to use this to fix sidebar. I also need to know window scroll position. However, I am always receiving zero value for window.pageYOffset when scrolling. Please let me know how to get it. – bjskishore123 Mar 24 '17 at 08:56
  • @bjskishore123 I don't know. That's something for a new question I suppose. – NGLN Mar 24 '17 at 09:51
5

I misunderstood your question. I thought you wanted the main scrollbar to also scroll stuff in another div. Well, here you go:

$(function(){
    $(document).scroll(function(){
        $('#my_div').stop().animate({
            scrollTop : $(this).scrollTop()
        });            
    });
});

Demo: http://jsfiddle.net/AlienWebguy/c3eAa/

AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
3

You can do this with position:fixed. The relevant part from GIZMODO's stylesheet:

#rightcontainer {
    position: fixed;
    margin-bottom: 10px;
    width: 300px;
    height: 100%;
    top: 0;
}
Jakub Roztocil
  • 15,930
  • 5
  • 50
  • 52
  • i got a further question, what if I have to make the contents center, how can I adjust the CSS ? ( see the link newly updated in the question? ) – Raptor Jul 31 '11 at 02:21
3

This technique is seen on lots of websites today. What they do is give position: fixed to the div on the right side of the screen, so it is not affected by the page scroll.

CSS:

body {
   position: relative;
}
#leftSide {
  width: 600px;
  ...rules ...
}

#rightSide {
   position: fixed;
   left: 610px;
}

HTML:

<body>
<div id="leftSide">
   affected by scrolling
</div>

<div id="rightSide">
  Not affected by scrolling
</div>
</body>
Ibu
  • 42,752
  • 13
  • 76
  • 103
  • I got 2 demo pages (see the updated question), but I cannot combine them together, can you give me some lights? – Raptor Jul 31 '11 at 02:41
0

I assume you are looking for something like this.

http://jsfiddle.net/RnWdh/

Please notice that you can alter the width of #main_content as you wish, as long as it doesn't go "behind" your fixed menu as your text will disappear.

The trick to get the fixed menu to the right in your centered container is using left: 50% and margin-left to adjust it correctly.

For example. You have a container-width of 960px, and fixed menu width of 300px, with left: 50%, there will be a white space of (960/2 - 300 = 180) to the right of the fixed menu. Then just adjust it with margin-left: 180px;

martnu
  • 773
  • 4
  • 11
0

One way to "center" the page (i.e. content + right panel) is to adjust the margins while making the right panel fixed position. So, if you have a div#content and a div#rightPanel, the css may look something like: 

#content {
    margin-left: 15%;   /* left page margin */
    margin-right: 25%;  /* right page margin + rightPanel's width */
}

#rightPanel {
    position: fixed;

    top: 0;
    right: 15%;  /* right page margin */
    width: 10%;
}

Just make sure that the left margin of #content is the same as the right margin of #rightPanel.

Here's an example: http://jsfiddle.net/william/ZruS6/1/.

William Niu
  • 15,798
  • 7
  • 53
  • 93