All geek questions in one place

Material Design Application Panel with CSS

I need to create a navigation bar, for example, an application bar in applications for creating materials using CSS. For example, the Google-Keep or Playstore application. This navigation bar has a title bar and a simple menu.

I have a div div and two fixed divs on top. One of them is always fixed, and the other has a negative extreme edge on the scroll. But, if I scroll down, a short “blinking” effect appears, and I don’t know why.

$(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>
Run code

Thanks for any help!

+4
source share
2 answers

. 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>
+1

:

#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>
0

Source: https://habr.com/ru/post/1657766/

More articles:


All Articles