Need help with Navigation Bar

1

Hi code campers. currently i’m working on my personal portfolio, and already stuck from the top :weary:
i want to make my navigation bar goes from transparent on top, to have solid background color as you scroll down.
can’t seem to figure this out. had research and found some solution using jQuery, but it’s still not working, maybe because i have no idea of jQuery at all. i’m using bootstrap navigation, and do you really need to use jQuery for this or can you do it with css/bootstrap?

this is my web coding, still has nothing on it :cry:

Thank you guys

2

Hi, it might be a good idea to start with a basic website without javascript/jquery. Then, after a while you will have learned way more, and you can go back and redo/change your portfolio.

1 Like
3

yeah, i guess you are right.
it’s just kind of frustrating that i cannot put what i have in mind into the page.

Thank you for your suggestion :smile:

4

Yes, you will need to use js for this. I haven’t finished js section myself yet, but I think what you need is to detect certain scroll point and then change navbar’s css.

I used this code to detect when user scrolls to the anchor:
var targetOffset = $(’#myAnchor’).offset().top;
Then use this info to make changes:
var $w = $(window).scroll(function () {
if ($w.scrollTop() >= targetOffset) {
$(’#my-img’).css(‘opacity’, ‘1.0’);
}
}

Maybe you can research in this direction and find a better decision for your problem. Probably you don’t even need anchors since navbar is probably fixed height and you can just throw it into “targetOffset”.

5

thanks for your help
i will look into that, and if i still cant do it. that’s it then, i will just going with what BenGitter said :slight_smile:
don’t want to stress myself out just yet, will change it in the future when i have learn more about jQuery Javascript :smile:

1 Like