0

I have a header in my index file defined as follows:

<header id="header">
    <div id="menu-trigger" class="header-button left icon-menu" ></div>
    <h1><a class='current' href="index.html#home">Title</a></h1>
</header>

I manage to get it static always at the top while scrolling with:

$(function() {
    console.log('Stick bar at top. . . ');
    // Stick the #nav to the top of the window
    var nav = $('#header');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width(),
                //z-index: 1;
            });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});

The problem is that any views I load into the index.html file appear over the header. I need the header to be over all other elements.

Is there a way to do this ? Or should I be reloading the header after I reload all the views ?

Thanks,

Filipe

Filipe Teixeira
  • 3,565
  • 1
  • 25
  • 45

2 Answers2

1

The CSS Propert z-index : 1000 should do that.

You can do it through class as well as through javascript/JQuery.

Usama Noman
  • 503
  • 1
  • 4
  • 10
1

I would try to use a separate css file instead applying css modifiers with jQuery.

The position:fixed css modifier and with a high z-index value show do automatically what you are doing in the scroll handler.

By the way, you should never set the header back to static, z-index doesn't work with static boxes. If you need a space at the top, use padding-top or margin-top in the container element

Nytramr
  • 84
  • 4