Coding

Stylin’ Around – Creating a sticky Navigation Bar – Part 2

  • 00:00:00 okay welcome back in the first part of
  • 00:00:03 this video we left when the navigation
  • 00:00:06 bar was basically finished but it wasn't
  • 00:00:09 attached to the top when we were
  • 00:00:11 scrolling down so this is what we'll be
  • 00:00:13 doing in this with you now I don't want
  • 00:00:16 it to fix it to the top at the beginning
  • 00:00:20 because the style will be different a
  • 00:00:23 little bit because as you can see here
  • 00:00:25 it does have no border at the bottom but
  • 00:00:29 if we scroll down this border with the
  • 00:00:32 slide shadow will up here okay so it's
  • 00:00:37 also a good exercise exercise for
  • 00:00:39 JavaScript and jQuery let's some start
  • 00:00:42 by creating the scrolling class which is
  • 00:00:46 basically the class will will attach to
  • 00:00:49 the navigation bar once we detect that
  • 00:00:52 it'll scroll down now we want the
  • 00:00:57 position to be fixed
  • 00:01:00 obviously and let me just add it for for
  • 00:01:07 demonstration purposes right now so what
  • 00:01:12 you can see right now is there is no
  • 00:01:14 longer centered and this is because we
  • 00:01:16 fixed the position all right so what we
  • 00:01:20 want to do is say okay from the top
  • 00:01:24 zero pixels because it should be
  • 00:01:26 directly at the top should also have a
  • 00:01:29 set index of two which was we wanted to
  • 00:01:32 be above every other element of the page
  • 00:01:35 we want this border on the bottom of one
  • 00:01:41 pixel solid dark gray and we want this
  • 00:01:50 box shadow which should have two pixels
  • 00:01:57 vertically zero pixels horizontally a
  • 00:02:01 little bit of spread and then here just
  • 00:02:07 like gray basically so now that this
  • 00:02:10 doesn't look the way we want so we do
  • 00:02:13 have
  • 00:02:13 to fixed positioning somehow and as you
  • 00:02:17 want it centered we're going to add some
  • 00:02:20 padding left and right to it so padding
  • 00:02:22 left will be 10% and this is important
  • 00:02:26 it should overwrite the default padding
  • 00:02:29 and padding right will also be 10%
  • 00:02:34 important now why do I choose 10%
  • 00:02:39 because the width is 80% as we specified
  • 00:02:45 here and here here this to navigation
  • 00:02:49 work and 10% are a half of the remaining
  • 00:02:54 20% on each side so 10% padding left and
  • 00:02:57 right now we have the content centered
  • 00:03:00 and just looks pretty good but it
  • 00:03:02 overlaps the first headline right from
  • 00:03:04 the start and this is due to the
  • 00:03:06 position fixed now we could work on this
  • 00:03:09 by just adding a margin to our main
  • 00:03:12 container taking into account the height
  • 00:03:15 of this navigation bar but I don't want
  • 00:03:18 this because I want this little effect
  • 00:03:20 that it has no border and when it's at
  • 00:03:23 the top and it gets attached once it
  • 00:03:27 starts scrolling so we need JavaScript
  • 00:03:29 for this and we could use the on scroll
  • 00:03:34 listener but this listener basically
  • 00:03:38 fires a lot when the user Scrolls down
  • 00:03:41 because it fires on every pixel the user
  • 00:03:44 Scrolls and this is pretty ridiculous
  • 00:03:47 because for us it's only important if
  • 00:03:50 we're at the top or not and we don't
  • 00:03:53 need this event every moment the user
  • 00:03:58 Scrolls so what we're going to do is
  • 00:04:00 we're going to set an interval which
  • 00:04:02 checks every 200 milliseconds if the
  • 00:04:06 users at the top and if he is we do
  • 00:04:08 nothing and if he's not we check if this
  • 00:04:13 navigation area already has the
  • 00:04:16 scrolling class and if it does not have
  • 00:04:19 it and the user is not at the top we
  • 00:04:21 will attach it otherwise if he is at the
  • 00:04:24 top we will remove
  • 00:04:25 so let's start by adding the interval
  • 00:04:30 and we do this by using the jQuery
  • 00:04:33 document.ready function because we only
  • 00:04:36 wanted to check if the document is
  • 00:04:40 readily prepared because otherwise it
  • 00:04:43 could lead to situations where we try to
  • 00:04:45 append something to an element the
  • 00:04:49 navigation which might not be loaded
  • 00:04:51 already so inside here we have set
  • 00:04:54 interval and we have to check scroll
  • 00:04:58 function which we still have to write
  • 00:05:00 and we will fire it on every 200
  • 00:05:04 milliseconds so let's write a check
  • 00:05:08 scroll function here it takes no
  • 00:05:10 arguments and first I want to select the
  • 00:05:17 navigation bar so Woronov
  • 00:05:20 will equal top nav and only the first
  • 00:05:26 item in case you should have several
  • 00:05:28 elements with this class then we want to
  • 00:05:32 check if document oops don't scroll top
  • 00:05:39 is greater than zero so if we're not at
  • 00:05:44 the top and we don't have the class of
  • 00:05:54 scrolling added to our navigation we
  • 00:05:58 will have to add it so now have add
  • 00:06:00 class scrolling right now in case we are
  • 00:06:12 at the top and we do have it added
  • 00:06:19 because if we're at the top but don't
  • 00:06:22 have the class we don't have to do
  • 00:06:23 anything so in this case
  • 00:06:29 I will remove the class remove class
  • 00:06:35 scrolling and with this code what should
  • 00:06:40 happen now is that once I scroll down we
  • 00:06:44 see this line and the navigation bar is
  • 00:06:48 fixed at the top and once we scold the
  • 00:06:50 scroll back to the top
  • 00:06:53 this fixing will be removed and this
  • 00:06:57 border at the bottom of our navigation
  • 00:06:59 will also disappear okay yeah looks good
  • 00:07:05 so this is everything we want to achieve
  • 00:07:07 in this video and I will bring out a lot
  • 00:07:11 more of there's CSS JavaScript tricks
  • 00:07:15 things which might be interesting if you
  • 00:07:18 have some special questions or ideas
  • 00:07:20 please leave them in the comments any
  • 00:07:21 feedback is highly appreciated and I
  • 00:07:24 will hopefully see you in the next video
  • 00:07:26 say what is this max goodbye