Question

我的网站侧边栏上有一个链接列表，它们以position：relative开头，然后当你滚过标题时，它变为position：fixed。它使用一个简短的jQuery脚本来检查滚动窗口的高度，如果高度大于我的标题的高度，则将类从“relative”更改为“fixed”，并在我的CSS中更改相应的类位置属性。我遇到的问题是包含链接的元素的宽度。当它是相对的时，我将宽度设置为100％，因此它填充了侧边栏。当它被修复时，宽度是相对于窗口的，所以我把它设置为宽度：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

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

“浮动”链接部分宽度的问题

1 个答案: