javascript - Css 逐像素变换 Y

Question

我的网站有一个固定在顶部的标题。我的网站标题顶部包含 Logo 。 Logo 非常大，高度约为 140 像素。我想将标题转换为 Y 轴并隐藏标题- 顶部并仅显示包含导航菜单的标题底部部分。由于标题是固定的，我必须应用 padding-bottom 将主要内容移动到标题下方。但是当我滚动header top 部分快速移动到顶部并隐藏但是由于 padding-bottom 主要内容的移动速度不如 header-top 。所以我想用 jquery/js 以某种方式转换标题顶部，以便在我向下滚动时逐像素转换并在标题高度达到时停止。反之亦然滚动到顶

提示:for 循环呢？

我的标记是

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

Answer 1

如果您希望页眉和页面内容同步滚动，您可以通过更改页眉的 css 属性 top 来实现，滚动量受限于 nav 的高度-菜单。您也可以使用 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>