调整Position的宽度:固定div以使其响应/流畅 [英] Resize width of Position:Fixed div to make it responsive / fluid

问题描述

我有一个侧边栏，要附加一个固定类以使其在滚动时具有粘性.

.fixed { position:fixed;top:0;bottom: 45px;min-height: 0 !important; }

但是一旦类被激活，侧边栏的宽度就不起作用了，所以一旦我们开始滚动，它就会弄乱响应式布局.

演示: http://jsfiddle.net/FyrRm/

我不确定如何调整fixed:position侧栏的大小以适应性​​地适应它.我尝试使用calc，但是没有用.

有什么想法吗?

解决方案

更新 没有考虑从小到大的调整大小

---

将此添加到$(document).ready:

$(window).resize(function() {
        $(".sticky").width($("#sidebar > img").width());
}).resize();

DEMO

I have a sidebar to which I am attaching a fixed class to make it sticky on scroll.

.fixed { position:fixed;top:0;bottom: 45px;min-height: 0 !important; }

But once the class gets activated the sidebar width is not working and so its messing the responsive layout once we start scrolling.

DEMO: http://jsfiddle.net/FyrRm/

I am not sure how to resize the fixed:position sidebar to fit it responsively. I tried using calc but it didn't work.

Any ideas?

解决方案

UPDATED Didn't take into account resizing from smaller to bigger

---

Add this to $(document).ready:

$(window).resize(function() {
        $(".sticky").width($("#sidebar > img").width());
}).resize();

DEMO

这篇关于调整Position的宽度:固定div以使其响应/流畅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！