Header appearence not working when refreshing the page

Question

Well, I have a very simple code, that do something like... when you are at the top of the page, #header have background-color:transparent;, and as you start scrolling down, it has static black color. It works great, but every time, when I refresh the page, the header has the black color instead of transparent.... I tried making the offset in scrolling from the top heigher, but still nothing. (when I refresh it, it has black color, as i scroll down, still black color, but as i scroll to the top again, right at the top it works, and i have the color transparent. [it starts working when i just move with the scroll button, but not from the beginning{landing} on the page])... there is my code:

js:

$(window).scroll(function () {
    if ($(window).scrollTop() < 500) { 
        $('#header').css("background-color", "transparent");
    }
    else{
        $('#header').css("background-color", "black");
    }
});

css (for header)

#header {
    background-color: black;
    height: 75px;
    width: 100%;
    top:0px;
    position: fixed;
    z-index: 10;
    }

html:

<div class="container">
        <!--HEADER-->
        <div id="header">
            <div id="main">
                <a href="index.html"><img src="images/my_logo.png"></a>
            </div>
            <div id="menu">
                <img name="menu" src="images/my_menu.png">
            </div>
        </div>
        <!--/HEADER-->

Basically a duplicate of [this so question](http://stackoverflow.com/questions/13098988/trigger-window-scroll): you'll want to trigger your scroll event handler on page load. — Kenney, Nov 02 '15 at 17:04
why not define `background-color: transparent;` in your css? — jsphpl, Nov 02 '15 at 17:05
@Kenney is 100% correct, no other solution is needed, nor might work. — Olavi Sau, Nov 02 '15 at 17:05

freefaller · Accepted Answer · 2015-11-02T17:12:25.297

2

At the moment you're only running the function when you scroll the page. You need to also run your function on the page load...

$(function(){
  // Run it on page-loaded
  setHeaderColour();
  // Run it on scroll
  $(window).scroll(setHeaderColour);      
});

function setHeaderColour() {
    if ($(window).scrollTop() < 500) { 
        $('#header').css("background-color", "transparent");
    }
    else{
        $('#header').css("background-color", "black");
    }
});

This is because the changes that you make on the client are not stored after a refresh, and the page is back to how it was before. This will make sure that after the refresh you set the colour correctly

As per the comment by @Quantiastical, this is probably better code, as it will cover more events and keeps your function in one place...

$(function(){
  $(window).on('load scroll resize orientationchange', function () {
    if ($(window).scrollTop() < 500) { 
        $('#header').css("background-color", "transparent");
    }
    else{
        $('#header').css("background-color", "black");
    }
  });
});

edited Nov 02 '15 at 17:12

answered Nov 02 '15 at 17:07

freefaller

19,368
7
57
87

1

Might even want to add more events `$(window).on('load scroll resize orientationchange', setheaderColour)` – jeffjenx Nov 02 '15 at 17:09
See my final answer :) it is much easier, but thanks, your answer works fine too... i prefer mine... – David Stančík Nov 02 '15 at 17:16
@PetrCihlar you might want to test your answer for when a person scrolls down, navigates to a different page, and then hits the back button to come back. Without updating the event handlers, your page will initially load to the scrolled position and the header will be transparent until a scroll event is triggered. – jeffjenx Nov 02 '15 at 17:39
Yeah, true, i did not recognized that option... you are right – David Stančík Nov 02 '15 at 21:43

score 0 · Answer 2 · answered Nov 02 '15 at 17:15

0

Well, i found my solution, which is the best. Simply change the background color of the header in css to transparent, so... when the page loads itself, the header has no appearance, when i start scrolling, the event-handler starts and jQuery do its job :) easy as a pie

#header {
    background-color: transparent;
    height: 75px;
    width: 100%;
    top:0px;
    position: fixed;
    z-index: 10;
    }

answered Nov 02 '15 at 17:15

David Stančík

340
6
23

I don't think this will resolve the issue for when a user scrolls down and either refreshes or navigates away and returns. – jeffjenx Nov 02 '15 at 17:43
Yes, it does... cause it will set the main color, so when user lands on page, it has that color, when starts scrolling, the js starts working, and it will work just like it is written in js... – David Stančík Nov 02 '15 at 21:42

Header appearence not working when refreshing the page

2 Answers2