gpt4 book ai didi

css - 侧边栏位置 "semi"固定 css

转载 作者:技术小花猫 更新时间:2023-10-29 12:11:07 29 4
gpt4 key购买 nike

我如何获得一个固定的侧边栏,例如包含本网站社交按钮的侧边栏:

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

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

目前我正在使用:

#sidebar { position:fixed; }

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

谢谢

最佳答案

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

是内容的例子。

关于css - 侧边栏位置 "semi"固定 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16089202/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com