前言

前天开会，设计项目需求时遇到的一个情况，标题要浮动，但是简单的浮动会导致界面缩小右端看不见，对于此设计的解决方法，如果各位大佬有更好的思路欢迎联系我进行修改添加。

css部分

当一个页面下滑，标题不动，此时就需要flex，把标题从布局中“浮”起来，如下：

<style>
.headerBackground {
    background: rgb(221, 221, 221);
    width: 1240px;
    height: 60px;
    margin: auto;
    left: 0;
    right: 0;
    position: fixed;
}
</style>

ok，完成了，下一步要求是随着页面下滑背景从透明变不透明，字一直不透明，这里我想的是分两层，一层是上边这个作为底，引入opacity并将z-index设置成一个小于字的值，所以现在是三层，第一层整体页面，第二层背景，第三层logo和文字，改法如下：

<style>
.headerBackground {
    background: rgb(221, 221, 221);
    width: 1240px;
    height: 60px;
    margin: auto;
    left: 0;
    right: 0;
    position: fixed;
    opacity: 0;
    z-index: 10;
}
.header {
    width: 1240px;
    height: 60px;
    margin: auto;
    left: 0;
    right: 0;
    position: fixed;
    display: grid;
    grid: auto/30% 70%;
    z-index: 20;
    justify-items: end;
    align-items: center;
}
</style>
<body>
<div id="header" class="header">
    <img src="" class="headerLeft">
    <div class="headerRight">
        <button>标签1</button>
        <button>标签2</button>
        <button>标签3</button>
        <button>标签4</button>
        <button>标签5</button>
    </div>
</div>
</body>

这里用了gird布局，关于grid我以后会专门写一篇文章，现在只需要知道这么用就行。

js部分

css以上即可，接下来是js的部分，我们现在要随滚动轴越靠下第二层的颜色越深，从要求出发，我们需要拿到y轴坐标和第二层的透明度标签，用y轴坐标除以一个数返回作为opacity的返回值，这里除以1000：

<script>
function BodyScroll() {
    var s = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    $('.headerBackground').css(
        'opacity',
        function() {
            return s / 1000;
        }
    );
}
</script>

ok，透明度实现完成，但是现在出现了一个问题，我窗口缩小，拖动横轴，右边的内容永远出不来，这是因为他被“浮”起来了，如果我们想让它根据横轴的变化而变化，我们需要拿到当前窗口x轴坐标，然后拿到logo和文字这一图层的定位坐标，将坐标减去x轴坐标，就能实现按滚动轴移动而移动：

<script>
function BodyScroll() {
    var s = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    var flexs = window.scrollX;
    $('.headerBackground').css(
        'opacity',
        function() {
            return s / 1000;
        }
    );
    $('.header').css(
        'left',
        function() {
            return -flexs;
        }
    );
}
</script>

ok，bug也成功修复~