使用CSS实现Material Design应用栏

Question

使用CSS实现Material Design应用栏

4

我需要使用CSS样式将导航栏设计成Material Design应用程序中类似于应用栏的样式，例如Google Keep应用程序或Playstore应用程序。在这个导航栏中有一个标题和一个简单的菜单。

我现在有一个内容div和两个固定的div在顶部。其中一个始终固定，另一个在滚动时具有负边距。但是，如果我向下滚动，会出现短暂的“闪烁”效果，我不知道为什么。

$(document).ready( function() {
  
    var lastScrollY = 0;
    var lastScrollDownY = 0;
    var lastScrollUpY = 0;
    
    $(window).scroll(function() {
      var scrollY = $(this).scrollTop();
        
        // detect scroll down / up
        if(scrollY < lastScrollY)
        {
         var diffScroll = lastScrollDownY - scrollY;
            if(diffScroll > 105)
            {
                diffScroll = 105;
            }
            var navbarY = -105+diffScroll;
            $("#navbar-bottom").css({
                "margin-top":navbarY+"px"
            });
            lastScrollUpY = scrollY;
        } else {
          var diffScroll2 = lastScrollDownY - lastScrollUpY;
            if(diffScroll2 > 105)
            {
                diffScroll2 = 105;
            }
            $("#navbar-bottom").css({
                "margin-top":"-"+diffScroll2+"px"
            });
            lastScrollDownY = scrollY;
        }
        
        lastScrollY = scrollY;
    });
    
});

body {
  height:100%;
}
#header {
  width:100%;
}
#navbar-top {
  width:100%;
  position:fixed;
  top:0;
  z-index:1000;
  height:35px;
  background-color:#1976D2;
}
#navbar-bottom {
  width: 100%;
 position:fixed;
 top:0;
 z-index: 999;
  height:105px;
  background-color: #2196F3;
}
#navbar-bottom .navbar {
  padding-top: 35px;
}
#wrapper {
  padding-top: 105px;
  position: relative;
  height:2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="header">
        <div id="navbar-top">
            ActionBar (always fixed)
        </div>
        <div id="navbar-bottom">
            <div class="navbar">
                Menu links here
            </div>
        </div>
    </div>
    <div id="wrapper">
        <div id="content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem 
        </div>
    </div>
</body>

非常感谢您的帮助！

- ManuManfred

似乎闪烁是由于轻微滚动引起的，因为您从-65px的margin top开始。如果您想要导航栏底部随内容滚动，为什么不将其放在包装器中呢？ - Pete

-65px 是指哪个部分？是默认的 CSS 值还是向下滚动的值？因为导航栏底部应该只随着向下滚动的内容一起滚动。当向上滚动时，导航栏应该在实际滚动位置上“滚入”。 - ManuManfred

2

我认为是这一部分引起了问题：var navbarY = -105+diffScroll;。如果你在这个变量上执行console.log，你会发现它最初是负数。 - Pete

谢谢！我只是用一个转换替换了它。请参考K. Daniek的答案。 - ManuManfred

2个回答

0

为子菜单添加流畅的动画效果：

#navbar-bottom {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    height: 105px;
    background-color: #2196F3;
    transition: all 500ms;
}

$(document).ready(function() {

  var lastScrollY = 0;
  var lastScrollDownY = 0;
  var lastScrollUpY = 0;

  $(window).scroll(function() {
    var scrollY = $(this).scrollTop();

    // detect scroll down / up
    if (scrollY < lastScrollY) {
      var diffScroll = lastScrollDownY - scrollY;
      if (diffScroll > 105) {
        diffScroll = 105;
      }
      var navbarY = -105 + diffScroll;
      $("#navbar-bottom").css({
        "margin-top": navbarY + "px"
      });
      lastScrollUpY = scrollY;
    } else {
      var diffScroll2 = lastScrollDownY - lastScrollUpY;
      if (diffScroll2 > 105) {
        diffScroll2 = 105;
      }
      $("#navbar-bottom").css({
        "margin-top": "-" + diffScroll2 + "px"
      });
      lastScrollDownY = scrollY;
    }

    lastScrollY = scrollY;
  });

});

body {
  height: 100%;
}
#header {
  width: 100%;
}
#navbar-top {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1000;
  height: 35px;
  background-color: #1976D2;
}
#navbar-bottom {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  height: 105px;
  background-color: #2196F3;
  transition: all 500ms;
}
#navbar-bottom .navbar {
  padding-top: 35px;
}
#wrapper {
  padding-top: 105px;
  position: relative;
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="header">
    <div id="navbar-top">
      ActionBar (always fixed)
    </div>
    <div id="navbar-bottom">
      <div class="navbar">
        Menu links here
      </div>
    </div>
  </div>
  <div id="wrapper">
    <div id="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
    </div>
  </div>
</body>

- user6633393

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kind user · Accepted Answer

这是你需要的。添加了transform: translateY()，它比仅更改margin-top属性更具动态性。请查看并告诉我是否满意，如果不满意，请让我知道，我会尝试改进。

https://jsfiddle.net/pfj9j8md/

var lastScrollY = 0;
 var lastScrollDownY = 0;
 var lastScrollUpY = 0;

 $(window).scroll(function() {
   var scrollY = $(this).scrollTop();

   // detect scroll down / up
   if (scrollY < lastScrollY) {
     var diffScroll = lastScrollDownY - scrollY;
     if (diffScroll > 105) {
       diffScroll = 105;
     }
     var navbarY = -105 + diffScroll;
     $("#navbar-bottom").css({
       'transform': 'translateY(0)'
     });
     lastScrollUpY = scrollY;
   } else {
     var diffScroll2 = lastScrollDownY - lastScrollUpY;
     if (diffScroll2 > 105) {
       diffScroll2 = 105;
     }
     $("#navbar-bottom").css({
       'transform': 'translateY(-200px)'
     });
     lastScrollDownY = scrollY;
   }

   lastScrollY = scrollY;
 });

body {
  height: 100%;
}
#header {
  width: 100%;
}
#navbar-top {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1000;
  height: 35px;
  background-color: #1976D2;
}
#navbar-bottom {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  height: 105px;
  background-color: #2196F3;
  transition: all .5s ease;
}
#navbar-bottom .navbar {
  padding-top: 35px;
}
#wrapper {
  padding-top: 105px;
  position: relative;
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="header">
    <div id="navbar-top">
      ActionBar (always fixed)
    </div>
    <div id="navbar-bottom">
      <div class="navbar">
        Menu links here
      </div>
    </div>
  </div>
  <div id="wrapper">
    <div id="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
    </div>
  </div>
</body>