asked on

jquery resize function not quite working

Hi EE, I have a function that I'm trying to trigger only if a window width is more than 768px wide.
The resize function I've wrapped it in kinda works but not quite.

The resize function only works if my windows starts smaller than 768px then increases but not the other way around.
Can anyone see what I am doing wrong?

var didScroll;
var lastScrollTop = 0;
var delta = 10;	
var navbarHeight = $('header').outerHeight();

	
function myFunction() {
 if($(window).width() > 768){ 
	 // the function that should only work if the window width is smaller than 768px
$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}
		 }
		
		};
	

//initialize
myFunction();

//call when the page resizes.
$(window).resize(function() {
    myFunction();
});

Open in new window

Marco Gasi

Not sure to understand, but you says that the function

. should only work if the window width is smaller than 768px

ut you are checking if width is greater of 768px. Try this

If($(window).width() < 768){

Open in new window

Jim Riddles

Just out of idle curiosity, what exactly are you attempting to do with this script? What is your end goal?

Julian Hansen

I am also at a bit of a loss of what you are trying to do - or more accurately the way in which you are trying to do it.

Having a setinterval function to deal with UI changes is a bit of a concern - pretty sure there is another way of doing what you want without having to use a setInterval

Combination of resize, scroll events and media queries should be all you need to achieve desired results - however, without more information it is hard to say how these should be employed.

Can you elaborate on what it is you want to do?

ASKER CERTIFIED SOLUTION

Neil_Bradley

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Neil_Bradley

ASKER

I generally always try and work through an issue before posting for assistance however in this instance a fresh pair of eyes and a good night sleep was the best help.