Css变换Y在每个像素逐像素

Css Transform Y in each pixel by pixel

本文关键字：像素 变换 Css      更新时间：2023-09-26

我的网站有一个固定到顶部的标题。我的网站标题顶部部分包含徽标。Logo相当大，高度约140px。我想将标题转换为Y轴并隐藏标题顶部部分，并仅显示包含导航菜单的标题底部部分。由于标题是固定的，我必须应用padding-bottom来移动标题下面的主要内容。但是当我滚动标题顶部部分快速到顶部并隐藏，但由于padding-bottom的主要内容不像header-top一样快。所以我想用jquery/js的方法来变换头部顶部，这样当我向下滚动时，它就会逐像素地变换出来，当头部高度达到时停止。反之亦然关于向顶部滚动

Hints : what about for loop?

我的标记是

<header>
   <div class="header-top">
       <a class="logo" href="image/logo.png>
   </div>
   <div class="nav-menu">
       ............
   </div>
</header>

What i have try 

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');
        }
    }
});

如果你想让你的标题和页面内容同步滚动，你可以通过改变标题的css属性top来做到这一点，nav-menu的高度限制了滚动的数量。您也可以使用transform，但这样更简洁。

headerTopHeight =  $('.header-top').innerHeight();
$(window).on('scroll', function(){
  $("header").css({top: -Math.min($(window).scrollTop(),headerTopHeight)});
  var menu = $(".nav-menu");
  if($(window).scrollTop() > headerTopHeight)
    menu.addClass('menu-shrinked'); 
  else
    menu.removeClass('menu-shrinked'); 
});
body {padding: 0px;}
header {height:100px; position: fixed; top: 0px; background: #EEE; width: 100%;}
#main-container {padding-top: 100px;}
.header-top {height:80px; background: #DDD;}
.nav-menu {height:20px; border-bottom: 5px solid #F00;}
.nav-menu.menu-shrinked {border-bottom-width: 2px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <header>
       <div class="header-top">
           This is logo
       </div>
       <div class="nav-menu">
           This is nav
       </div>
    </header>
      <div id="main-container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales volutpat vehicula. Suspendisse pharetra quis arcu nec tincidunt. Etiam ac ultrices ligula. Phasellus sem dolor, laoreet id massa nec, efficitur tristique augue. Praesent gravida viverra augue quis rhoncus. Nullam eget velit nec ex hendrerit accumsan. Duis rhoncus elit eu fringilla porttitor. Maecenas sollicitudin blandit ante, ac tempus tortor aliquet dignissim. Ut nec convallis ipsum. Proin fermentum, velit vel mollis placerat, est orci faucibus leo, in porttitor tortor diam et tellus. Suspendisse ultrices mattis dui at efficitur. Duis tincidunt ac lorem vitae fringilla. Duis placerat elit ut magna pulvinar efficitur.
    Quisque quis nunc eu sem tempor tincidunt id ac nibh. Aenean nibh dui, vehicula eget egestas eu, sagittis eu quam. Suspendisse congue tortor sit amet tortor venenatis, at elementum elit vestibulum. Morbi at nibh finibus, iaculis lacus sed, hendrerit tellus. Fusce quam massa, pharetra tincidunt elit ac, luctus rhoncus justo. Quisque nec justo et tellus blandit malesuada. In hac habitasse platea dictumst. Vestibulum faucibus mattis tortor et rhoncus. Praesent quis augue gravida, condimentum lorem sit amet, imperdiet justo. In dictum dictum massa, at posuere nulla sagittis ac.
    In placerat pellentesque lectus, ut volutpat nulla accumsan non. Nunc vestibulum leo felis, in dapibus mi fermentum eu. Proin vel imperdiet orci. Morbi facilisis elit nisl, a porta tellus mollis vitae. Nulla finibus dapibus ornare. Donec interdum, risus id consequat ultrices, enim est ultricies quam, quis rhoncus metus metus non arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed faucibus justo dolor. Vestibulum nibh nunc, congue at tortor non, vehicula finibus sem. Aenean sit amet sapien sem. Aenean condimentum tincidunt quam vitae malesuada. Maecenas quis faucibus tellus. Nulla at tempus augue, ac interdum leo. Phasellus id augue id turpis pulvinar posuere.
    Curabitur diam ipsum, gravida in est vel, commodo sagittis tellus. Donec sed quam eleifend, porttitor ligula nec, gravida magna. Pellentesque quis purus finibus, pellentesque dui vitae, vulputate nunc. Praesent ullamcorper, arcu eget eleifend ultricies, ante lacus consequat leo, vel volutpat ligula mi eget urna. Nullam viverra dictum erat quis tincidunt. Praesent varius maximus viverra. Suspendisse ac posuere magna. Maecenas varius, tortor ac pretium mollis, lorem ante pretium justo, non maximus lacus leo vel elit. Morbi lectus urna, auctor id vestibulum vel, venenatis quis odio. Phasellus facilisis fermentum dictum. Pellentesque id purus finibus, sollicitudin magna id, accumsan mauris. Sed id massa a leo pellentesque feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis at varius enim. Sed velit nibh, porta nec sollicitudin nec, iaculis ac nunc.
    </div>

相关文章：