Question

I’m trying to create a responsive website with a fixed navigation only when the document width is above 769px.

I’ve got the following code which works fine when i test it using alerts to say whether the window is bigger than the size or lower than the size when re sizing.

However when i add my sticky header script into the else statement it doesn’t work and i cant figure out why.

Can anyone point me in the right direction.

Thanks

This is the window size statement:

 $(window).resize(function() {
 if ($(window).width() < 769) {
 alert('Less than 769');
 }
 else {
 alert('More than 769');
 }
 });​

And this is the code I’m trying to use if the window width is bigger than 769:

var aboveHeight = $('header').outerHeight();

$(window).scroll(function() {

    if ($(window).scrollTop() > aboveHeight) {

        $('nav').addClass('fixed').css('top', '0').next().css('padding-top', '99px');
    } else {

        $('nav').removeClass('fixed').next().css('padding-top', '0');
    }
});

Thanks

Answer 1

Just save the state ant test in your scroll event

var isRightSize = false;

 $(window).resize(function() {
     if ($(window).width() < 769) {
         isRightSize = false;
     }
     else {
         isRightSize = true;
     }
 });​

var aboveHeight = $('header').outerHeight();

$(window).scroll(function() {

    if(!isRightSize)
        return false;

    if ($(window).scrollTop() > aboveHeight) {

        $('nav').addClass('fixed').css('top', '0').next().css('padding-top', '99px');
    } else {

        $('nav').removeClass('fixed').next().css('padding-top', '0');
    }
});