Bootstrap 4 Change Navbar Background Color On Scroll

Bootstrap 4 Change Navbar Background Color On Scroll


hi guys and welcome to another bootstrap
for web design video this is jamie from system 22 and web designer tech tips
calm in this video we’re gonna sort of
continue on playing with our navbar up here in the last one we put in this
linear gradient here so that you can see your picture at the top and also you
could still see all your links when you scroll down here that’s a pretty good
option it’s very easy simple bit of CSS as you saw in the last video but what if
we want to have this completely transparent and then when it gets down
to here after the hero section there when it gets to here we want it to be a
nice color let’s say this blue color so at the top is transparent and when we
get down here we want to make it pollute well it’s not difficult to do we do have
to write a bit of JavaScript for that though but like I say it’s not too
difficult so let’s go ahead and do that let’s have a look what I’m gonna do is
I’ll put this back to being transparent so if we open our brackets software there’s our background with a linear
gradient right there let’s just put that back to transparent or transparent kids fine and quick say go back to the
site make sure it’s done what we wanted it to do
yet now that’s completely transparent you can’t see it at all there although
those links are still there all right so what we wanted to do it’s transparent
now and we wanted to be transparent all the way down there but when it gets to
here we want to be able to see it to all this we’re just going to choose this
blue color background for it I think the red would be too much so
yeah let’s stick with that blue so what I’m going to do is I’ve got to write a
bit of JavaScript here so let’s go back to our brackets I’m gonna add another CSS class and I’ll
call this class background dot dot scrolled so it’s going to be B G dot dot scrolled
no gaps open and close some curly brackets and in this one we want to
actually give it a background color so let’s just copy that and the color that
blue color that we used there was 10 ca ca I believe that all those have it will
at 10:00 ca ca so let’s use that color back to our
brackets okay
that looks right so we’ve got transparent and we got
I’ll spell that right doll dark BG ducts we’ve got BG dark and we got BG dark
scroll now comes the fun bit we thought actually write some JavaScript and I’ll
try and paste this javascript below the video if it’ll let me I think it should
let me sometimes the browser’s a bit weird about letting you post a source
stuff so if we go to the bottom where our scripts here or here all our scripts and I will give it a back a little title
here and to do that with script it’s a little tag like that
exclamation coupla hyphens there and I’ll say just so anybody that’s has to
work on this after me you can find that bit of script easy or this bit of script
so let’s open some script tags let’s start writing some script well what do
we wanted to do we wanted to function we want to focus on the window and we want
it to do something when it Scrolls so all we start with the dollar sign over
to round brackets and we want the window what are we wanting to do we want it to
scroll so that’s dot scroll and the function that we really want to
use here so we open another a round bracket
and there’s the function right there but we were right Aronian function and again just opening and closing round
brackets there then we want to open a curly bracket after that and tell it
what we want it to do within these curly brackets
so well it’s just moved down the line give it a bit of space and start with
another dollar sign because we want it to we wanted to work on the navbar so what I do is put nav in some single
inverted commas there so we wanted to be working on our nav bar up here nav on
this section you and we wanted to switch between those
two classes that we created background dark background are scrolled and to do
that we have to tell it to toggle which is a way for you know that it knows to
switch between them so we’re going to say toggled and it’s the class so we say class no
gap capital C got it was more round round up brackets then we want to target this scrolled element that we’ve got
there so again we’re going to put those in
some single inverted commas and then after that we were on Kama hand we’re basically telling it to do this so
we want a dollar sign this like I say I’ll put this down below
because this is a little out of the scope for most of my videos and scroll
top we want to make it larger than or more than when it’s more than let’s just
guess up I’ll say 800 we’ll have to adjust that let’s just close out that
curly that round bracket there and semicolon and let’s just put a semicolon offer in
case we want to add some more save that and see if it actually works
now so it should toggle between those two classes the transparent and the blue
so we saved that back to our site refresh start scrolling down
there it is it’s pop that blew in it’s a little bit high up there
you I could probably deal with the one to
another 300 300 or so and pops in instantly so let’s just give it a it’s easy it in
say 750 meals or 3/4 of a second just to make it not quite so jump jump jump
jumping so if we go back up to here let’s put it here
give it a transition try 750 this is in milliseconds so be 3/4 of second
and we’ll have at ease ease in you all nicely in line control s to say
and we said we wanted to add about three hundred pixels didn’t we so eight nine
ten eleven says try 1100 save and back to the site give back up
to the top refresh and start scrolling down who maybe a little bit too late there
you see it’s taking about three-quarters of a second to appear you little bit see you can’t read it there
if I just thought that and not gonna be able to read it so what happening just a
little bit before that so let’s go back and just tidy that up let’s call it we’re 1080 20 pixels less back to the
site let’s go back up to the top again start scrolling down you think
why wouldn’t that happen just a little bit faster let’s change that timing say half-second instead yes back to the site go back to the top
and refresh and that starts growing there I use this
little bar at the side you perfect can see all the way now even shave off a few more pixels there you excellent
yeah I’m happy with that that’s absolutely fine
they’ve got transparent all the way down boom when you get the end of the hero
section turns to that blue color just what we wanted so there you have it
there’s how to change your navigation color on scroll using a bit of
JavaScript and CSS I hope you found that useful if you have please like and
subscribe if you’re interested in web development
take one of our courses below we’ve got some huge discounts for our YouTube
subscribers there’s also some great free courses down there so do take a look
once again this has been jamie from system 22 and web design and tech tips
comm thanks for watching have a great day

Comments

  1. Post
    Author
    Eric William

    Hi Jamie,

    Another off topic question if you don't mind. How do you reduce image file sizes for page optimization?

    I use open source GIMP to reduce the file size to almost zero and then slowly increase it until it's a happy medium between file size and image quality. Hard to keep it under 100 KB though.

    None-the-less, I've seen out there some pretty sharp images with low file sizes.

    How do the pros do it?

    Thanks,

    Eric

  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
    sheik masood

    How come your code is working even after you left a spelling mistake in your class scolled instead of scrolled.
    P.S:It is not working for me

  10. Post
    Author
  11. Post
    Author
  12. Post
    Author
    Allan Fernz

    Works amazingly on Chrome and android devices, but doesn't work for iOs and Safari ! 🙁 Can anyone help me out!

  13. Post
    Author
  14. Post
    Author
  15. Post
    Author
  16. Post
    Author
  17. Post
    Author
  18. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *