Javascript Css逐像素变换每个像素中的Y

我的网站有一个固定在顶部的标题。我的网站标题顶部包含徽标。徽标的高度相当大，约为140px。我想将标题转换为

Y

轴，隐藏标题顶部，仅显示包含导航菜单的标题底部。由于标题是固定的，我必须应用

padding bottom

将主要内容移动到标题下方。但当我滚动标题时，标题顶部会快速移动到顶部并隐藏，但由于

padding bottom

的原因，主要内容的移动速度不如

标题顶部

快。因此，我想用

jquery/js

来转换标题顶部，这样当我向下滚动时，它会逐像素转换，当标题高度达到时停止。反之亦然，向顶部滚动

提示：for循环如何？

我的加价是

---

如果希望页眉和页面内容同步滚动，可以通过更改页眉的css属性

top

，滚动量受

nav菜单的高度限制。您也可以使用
转换
，但这样更干净


headerTopHeight=$（'.header-top'）.innerHeight（）；
$（窗口）.on（'scroll'，function（）{
$（“header”）.css（{top:-Math.min（$（window.scrollTop（），headertopheth）}）；
变量菜单=$（“.nav菜单”）；
if（$（窗口）.scrollTop（）>HeaderToPhight）
menu.addClass（'menu-shrinked'）；
其他的
menu.removeClass（'menu-shrinked'）；
});
body{padding:0px；}
标题{高度：100px；位置：固定；顶部：0px；背景：#EEE；宽度：100%；}
#主容器{填充顶部：100px；}
.收割台顶部{高度：80px；背景：#DDD；}
.nav菜单{高度：20px；边框底部：5px实心#F00；}
.nav-menu.menu-shrinked{边框底部宽度：2px；}

这是标志
这是导航
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一辆汽车。这是一个很好的例子。舌苔。Phasellus sem dolor、laoreet id massa nec、efficitur tristique augue。临产孕妇维韦拉·奥古斯·奎斯·朗库斯。无需根据具体情况进行调整。两个是rhoncus Elite-eu fringilla porttitor。他是一位文雅的艺术家，也是一位高贵的艺术家。但不包括同侧痉挛。发酵液中的Proin，velit vel mollis placerat，最早的orci faucibus leo，位于tortor diam et tellus港口。Suspendisse ultrices mattis酒后驾车。我是弗林蒂利亚。两个地方的精英都有着巨大的肺功能。
您必须遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他有关法律法规。埃尼安·尼布酒后驾车，欧洲射手座。位于精英前庭的康格托尔托尔托尔维纳提斯吊床。莫比在尼布·菲尼布斯，艾库利斯·拉库斯，亨德雷特·泰勒斯。福斯·夸姆·马萨、法雷特拉·廷西德·艾利特·阿克、卢克图斯·朗卡斯·胡斯托。我不知道该怎么做。在hac habitasse Plateum，一句名言。前庭唇沟沟。孕期的准备工作、调味品的制作、饮食的调整。在马萨的名言中，在波苏尔·努拉·萨吉提斯ac。
在适当的位置上，大鼠的眼睑下垂，但不明显。狮子座猫科动物的Nunc前庭，位于欧盟的dapibus mi fermentum。帝王时代。Morbi facilisis elit nisl，一种生命之门。无尾小鱼。不可相互干涉，不可侵犯，不可侵犯，不可侵犯。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。塞德·福西布斯·胡斯托·多洛。前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭。埃尼安·西特·萨皮恩。埃尼亚调味品马来苏达之酒。梅塞纳斯·奎斯·福西布斯·泰勒斯。坦普斯-奥古斯的纳拉，里欧的ac interdum。这是一个月，这是一个月。
同侧库拉索虫，妊娠期最短，宽矢状体。Donec sed quam eleifend，利古拉港nec，大孕妇。佩伦茨克·奎斯·菲尼布斯，佩伦茨克·奎伊·维塔，瓦努克。前乌兰科佩尔，后乌尔里塞斯，前利奥委员会，后乌尔纳委员会。这是一句至理名言。维韦拉大葡萄园。麦格纳酒店。葡萄品种、玉米品种、玉米品种、玉米品种、玉米品种、玉米品种和玉米品种。威尼斯人前庭水平的验尸官。发酵粉粉虱。佩伦茨克人的身份证是purus finibus，sollicitudin magna身份证是sollicitudin magna身份证，accumsan mauris。塞德·马萨是利奥·佩伦特式的封建主义者。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。瓦里乌斯埃尼姆酒后驾车。这是一个非常好的解决方案。
您是否可以添加
菜单收缩
css定义
菜单收缩
实际上会降低页眉底线高度
<header>
   <div class="header-top">
       <a class="logo" href="image/logo.png>
   </div>
   <div class="nav-menu">
       ............
   </div>
</header>

headerTopHeight =  $('.header-top').innerHeight();


$(window).on('scroll', function(){
    if($(window).scrollTop() > menuChangeOn){     //here menuChangeOn is the position where menu will shrink 
        menu.addClass('menu-shrinked');           // here menu is header and menu shrinked decreases the header-bottom line  height


        if(menu.hasClass('menu-shrinked')){
             menu.css({
                'transform': 'translateY(-' + headerTopHeight + 'px)',
                '-webkit-transform': 'translateY(-' + headerTopHeight + 'px)',
                '-moz-transform': 'translateY(-' + headerTopHeight + 'px)',
                '-o-transform': 'translateY(-' + headerTopHeight + 'px)',
                '-ms-transform': 'translateY(-' + headerTopHeight + 'px)'
            });
        }


    } else{
         menu.removeClass('menu-shrinked');

         if(menu.attr('style') && menu.attr('style').length > 0){
             menu.removeAttr('style');
        }
    }
});