4

我如何获得一个固定的侧边栏，比如包含本网站上社交按钮的侧边栏：

http://www.tripwiremagazine.com/2012/11/social-media-buttons-and-icon-sets.html

我希望我的侧边栏在我向下滚动时固定在屏幕顶部，但在页面顶部必须有一个绝对位置，以便它在我滚动时停止跟随浏览器。

目前我只是在使用：

#sidebar { position:fixed; }

但这并没有在到达页面顶部时给它一个绝对位置。

谢谢

4

2 回答 2

6

html

<div class="wrapper"><div class="abs" id="sidebar"></div></div>

CSS

.abs { position: absolute; }

.fixed {
position: fixed;
top: 30px !important;}

#sidebar {
top: 150px;
left: 0;
height: 100px;
width: 20px;
background-color: #ccc;}

.wrapper {
height: 1500px;
padding: 20px;}

jQuery

 $(document).scroll(function() {
    var scrollPosition = $(document).scrollTop();
    var scrollReference = 10;
    if (scrollPosition >= scrollReference) {      
        $("#sidebar").addClass('fixed');   
    } else {
        $("#sidebar").removeClass('fixed');
        $("#sidebar").addClass('abs');
    };
});

此代码的演示：

http://jsfiddle.net/B3jZ5/6/

<div class="wrapper">

是内容的例子。

于 2013-04-18T17:42:28.510 回答
1

你也可以试试这个插件：

https://code.google.com/p/sticky-panel/

于 2013-04-18T17:27:52.920 回答