How to set a div to change its background and alpha levels upon scrolling

Question

I am looking at websites for inspiration for my new start ups homepage. I saw https://www.pactcoffee.com/ and their home page features a full background image for the header and the nav bar is transparent then it becomes a solid color nav bar as you scroll down. I have only been able to set up the CSS for the site but I don't understand what to do to have the change in nav bar color.

I tried basically having a header tag with a background image and the nav bar and a div below it thats empty but have a constrained height. From there I have no clue. — ABrowBoyGenius, May 26 '15 at 02:47

score 1 · Accepted Answer · edited May 23 '17 at 10:24

1

You can do something like this...

http://jsfiddle.net/ojcqbLr2/

Check the Fiddle to see the rest of the code... like the CSS.

This JS will do this.

$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
    $('.topMenu').fadeIn();
} else {
    $('.topMenu').fadeOut();
} });

By the way, I found this info by search. Show div on scrollDown after 800px

I just made edits to the code so it was at the top and not bottom.

Best of luck.

edited May 23 '17 at 10:24

Community

1
1

answered May 26 '15 at 04:51

newJavaCoder

93
1
8

The y > 100 stands for 100 pixels? – ABrowBoyGenius May 26 '15 at 23:45
Yes it does. This can be adjusted however you like. Please accept answer :) – newJavaCoder May 27 '15 at 00:23
How do I have that dynamic for different types of mediums (laptop, tablet, and mobile)? – ABrowBoyGenius May 27 '15 at 02:59
You can create different js code for each type. For example. Change scroll top to scroll top Tablet for tablet and adjust css according. Altho... 100px from the top is 100px from the top no matter what device. Especially if you have the meta tags to be equal to 1 for the screen. – newJavaCoder May 27 '15 at 03:04
I'm sorry, you wouldn't adjust the scrolltop method. U would change the number, and then change the .topMenu to something like .topMenuTablet for a tab. – newJavaCoder May 27 '15 at 03:10
I think I am looking for a more refined answer with altering the same div changing its background and alpha levels upon scrolling to the bottom of another div. – ABrowBoyGenius May 27 '15 at 03:47
Perhaps work on some code and throw it in a fiddle and we can go from there. Perhaps we have a communication barrier as your not explaining what you need/want. – newJavaCoder May 27 '15 at 03:52
Ok. So what is your question now? – newJavaCoder May 28 '15 at 05:09
Awesome. Great job :) – newJavaCoder May 28 '15 at 16:20

score 0 · Answer 2 · answered May 27 '15 at 06:18

I have found that you can set two divs. One of which will be display set to none.

$(document).scroll(function () {
var headerHeight = $('header').height(),
    s = $('.nav'),
    y = $(this).scrollTop();
if (y > headerHeight) {
    $('.navLong').fadeIn();
    $('.nav').fadeOut();

} else {
    $('.navLong').fadeOut();
    $('.nav').fadeIn();
}});

This allows one div to disappear when one appears and vice versa. A working example is can be found in the DEMO

How to set a div to change its background and alpha levels upon scrolling

2 Answers2