Question

我有一个带有可滚动表格和背景渐变的粘性标题。我希望粘性标题具有与正文相同的背景（即渐变取决于您向下滚动的距离），但没有表格显示。

这是我使用JQuery（JSFiddle）的解决方案，它在窗口滚动时重新计算标题渐变的开始和结束颜色。是否有一个仅限CSS的解决方案，也许是为了使标题下方的表格部分不可见，或强制标题共享背景的渐变？

HTML

<div id="container">
    <header>Hello world!</header>
    <table>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
    </table>
</div>

CSS

body {
    background: linear-gradient(white, black)
}
header {
    position: fixed;
    font-size: 72px;
    width: 480px;
}
td {
    border: 1px solid black;
    width: 200px;
    height: 200px;
}

JQuery的

$(function() {
    function updateGradient() {
        var header = $('header');
        var top = $(window).scrollTop();
        var bottom = header.outerHeight() + top;
        var totalHeight = $('#container').height();
        top = Math.round(255 * (1 - top / totalHeight));
        bottom = Math.round(255 * (1 - bottom / totalHeight));
        var gradient = 'linear-gradient(rgb(' + top + ',' + top + ',' + top + '), rgb(' + bottom + ',' + bottom + ',' + bottom + '))';
        header.css('background', gradient);
    }
    $(window).scroll(function() {
        updateGradient();
    });
    updateGradient();
});

使粘性标题共享背景渐变

0 个答案: