侧杆位置“半”固定css [英] Sidebar position "semi" fixed css

问题描述

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

How do i get a fixed sidebar like the one containing the social buttons on this site:

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

当我向下滚动屏幕时，我希望将侧栏固定在屏幕顶部，但在页面顶部必须有一个绝对

I want my sidebar to be fixed to the top of my screen when i scroll down but on the top of the page there must be an absolute position it so that it stops following the browser as i scrool.

目前我只是使用：

#sidebar { position:fixed; }

但是这不会给它一个绝对的位置，当到达页面的顶部。

But this does not give it an absolute position when reaching the top of the page.

谢谢

推荐答案

html >

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

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">

是内容的示例。

这篇关于侧杆位置“半”固定css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！