javascript - How to create a fixedsticky sidebar in CSSJS? - Stack Overflow

admin管理员组

文章数量:1208155

I'm trying to create a website with main content area and a sidebar, something like here on Stack Overflow. The goal is that when you scroll down, the sidebar stays visible.

I have seen two approaches to this:

1. position:fixed;
2. JavaScript manipulation with the DOM

Approach no. 1, as far as I know, will have a problem when the viewport is smaller than the sidebar contents so I guess that can't be used reliably and JavaScript scripts that I have seen are usually animated or generally "slow" (you can see that there is redrawing going on after each scroll).

Can someone point out a JavScript library / CSS approach that would not suffer from the aforementioned issues?

Edit: an example would be this page but with the sidebar sticking to the top without an animation and correctly handling the situation when the sidebar is higher than content / viewport.

I'm trying to create a website with main content area and a sidebar, something like here on Stack Overflow. The goal is that when you scroll down, the sidebar stays visible.

I have seen two approaches to this:

1. position:fixed;
2. JavaScript manipulation with the DOM

Approach no. 1, as far as I know, will have a problem when the viewport is smaller than the sidebar contents so I guess that can't be used reliably and JavaScript scripts that I have seen are usually animated or generally "slow" (you can see that there is redrawing going on after each scroll).

Can someone point out a JavScript library / CSS approach that would not suffer from the aforementioned issues?

Edit: an example would be this page but with the sidebar sticking to the top without an animation and correctly handling the situation when the sidebar is higher than content / viewport.

• javascript
• html
• css
• dom

Share Improve this question Follow edited Mar 11, 2012 at 23:14 Borek Bernard asked Mar 11, 2012 at 19:07 Borek BernardBorek Bernard 53.2k6262 gold badges176176 silver badges246246 bronze badges 3

• 2 Have you tried to retrieve window's height with javascript, then giving this height to the sidebar on position: fixed, with the overflow that fits your need ? – rayfranco Commented Mar 11, 2012 at 19:16
• Sorry I probably won't have time to experiment with this at the moment but will try to come back to this later. Of if you have a working example at hand it would speed things up. – Borek Bernard Commented Mar 11, 2012 at 21:43
• Rather minimal plain JS solution on GitHub: github.com/MikeSpock/stickyad – Mihaly KR Commented Mar 2, 2017 at 14:39

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 8

I don't like heavy JS solutions, so important thing to ask is - preferred compatibility. In IE8+ it is possible instead of

var $window = $(window),
    $sidebar = $(sidebar);

$window.on('resize', function(){
    $sidebar.height($window.innerHeight());
});

$window.resize();

do something like this (pure CSS solution):

#sidebar {
    position: fixed;
    left: 0; /* or right */
    top: 0;
    bottom: 0;
    overflow: auto;
}

When you have top&bottom / left&right value at the same time, box will be stretched. (JSFiddle demo)

Got it. It is Javascript based, but I'm sure that's nothing heavy and even IE8 should solve it pretty fine.

var top = $('#sidebar').offset().top;
var height = $('#sidebar').height();
var winHeight = $(window).height();
var gap = 10;
$(window).scroll(function(event) {
    var scrollTop = $(this).scrollTop();

    // sidebar reached the (end - viewport height)
    if (scrollTop + winHeight >= top + height + gap) {
        // if so, fix the sidebar and make sure that offset().top will not give us results which would cancel the fixation
        $('#sidebar').addClass('fixed').css('top', winHeight - height - gap + 'px');
    } else {
        // otherwise remove it
        $('#sidebar').removeClass('fixed').css('top', '0px');
    }
});​

demo

You could catch client window's height and giving it to your sidebar like this :

var sidebarHeight = $(window).innerHeight();

$('#sidebar')​​​​​​​​​​​.css('height',sidebarHeight);​​​​​​​​​​​​​

With the proper CSS for the sidebar :

#sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    overflow: hidden;
}

Here is a working JSFiddle.

You could also watch for window resizing to avoid a mess on resize :) Here is the way to go with jQuery

Good luck

Not sure if you have this figured out but I have created a contained sticky sidebar jQuery plugin. It's really simple and allows you to invoke with just one line of jQuery. Take a look here: http://mojotech.github.com/stickymojo/

It starts by position: fixed; then uses javascript to handle any resizes, scrolls and even allows you to specify a footer element that it should not intersect. By combining these approaches you will get a smooth looking fixed element. Plus, we made it easy for you.

Code and demo here: http://closure-library.googlecode.com/svn/docs/class_goog_ui_ScrollFloater.html

本文标签： javascriptHow to create a fixedsticky sidebar in CSSJSStack Overflow