html - "floating"链接部分的宽度问题

Question

我网站的侧边栏上有一个链接列表，一开始是 position: relative，然后当你滚动到标题时，它变成了 position: fixed。它使用一个简短的 jQuery 脚本来检查滚动窗口的高度，如果高度大于我的标题的高度，则将类从“相对”更改为“固定”，以及我的 CSS 中相应的类更改位置属性。我遇到的问题是包含链接的元素的宽度。当它是相对的时，我将宽度设置为 100%，以便它填充侧边栏。当它固定时，宽度是相对于窗口的，所以我将它设置为 width: 25%，这是一个近似值。它在我的屏幕上运行良好，但是当我在更大的屏幕上尝试时，该元素与主要内容区域重叠。然后我尝试将 CSS 更改为如下所示:

.fixed {
   position: fixed;
   left: 15%;
   right: 70%;
}

但同样，它在大屏幕上无法正常工作。关于接下来要尝试什么的任何想法？非常感谢!

编辑:我尝试将其添加到我的脚本中，但它仍然无法正常工作:

$(window).scroll( function() {
if($(window).scrollTop() > 150){
        //begin to scroll
    var links = $("#project-links");
    links.attr('class', 'fixed');
    var windowWidth = $(window).width();
    var newLeft = .075 * windowWidth;
    var newRight = .68 * windowWidth;
    var strLeft = newLeft.toString() + 'px';
    var strRight = newRight.toString() + 'px';
    links.css({'left': strLeft, 'right': strRight, 'width': ''});
} else {
    //lock it back into place
    var links = $("#project-links");
    links.attr('class','relative');
    links.css({'left': '', 'right': '', 'width': '100%'});
}
});

编辑 2:终于修好了，我太傻了。这是诀窍:

if($(window).scrollTop() > 150){
    //begin to scroll
    var links = $("#project-links");
    links.attr('class', 'fixed');
    links.css('width', links.parent().width());
}

Answer 1

实际上，当 position 属性设置为 fixed 时，您的 .fixed 容器是相对于窗口的。百分比在这里对你没有帮助，你需要绝对值。您已经嵌入了一个脚本，它可以使用父元素的宽度并在调整大小时将其应用于 .fixed 元素。