我有一个包含用户名的页脚。我希望它始终显示在视口的底部。就像一个固定的底部栏,但只在我的侧边栏上。
我使用函数
function setFooterStyle() {
var docHeight = $(window).height();
var footerHeight = $('#footer').outerHeight();
var footerTop = $('#footer').position().top + footerHeight;
$('#footer').css('margin-top
我有一个问题的CSS计算返回错误的值为%。
我的想法是创建一个粘性的侧边栏,你首先滚动到最后,然后它会一直留在那里,直到内容结束。当我对div使用绝对高度时,它适用于vh单位,但当我使用%时,它就不起作用了。
.sidebar {
position: sticky;
top: calc(100vh - 100%); <-- does not work
top: calc(100vh - 1600px); <-- works as expected.
}
因此,我可能误解了%在这个上下文中的含义(我的理解是:应用.sidebar类的对象的高度),或者calc()不适合使用?
编辑:
当您在页面上下滚动时,我已经有了一个在视图端口中保持侧栏的解决方案。当侧边栏比内容区域更长时,问题就出现了,当侧边栏不断向下推时,你会不断地滚动,得到这个抖动的效果。
我在jsFiddle: (全屏: )中有一个这个设置的例子。
我的问题是,当侧边栏触及底部/页脚区域时,是否有办法使其停止?
我读过关于将侧边栏设置为绝对的文章,不幸的是,它是一个现有的站点,而更改位置不起作用,并且干扰了许多现有的页面元素。
下面是我正在使用的jQuery/js:
// set the offset
var sidebarOffset = $(".sidebar").offset