Fixed Navbar Issue After Resize To Page

I have a page if you click you are gonna see demo page and there is a fixed menu which is hidden. after scroll page to down you'll see fixed menu set as display:block as you see on

Solution 1:

Since you're defining the second jQuery.scroll function within an if statement, it only becomes active if the window width is less than 768px at the moment the script runs - it doesn't kick in when the window is resized. Instead you could try this format:

jQuery(window).scroll(function(){
    if ($(window).width() < 768) {
        // calculations and animation go here
    }
});

Or better yet, combine the two jQuery.scroll functions together:

jQuery(window).scroll(function(){

    var navOffset = jQuery(".after-scroll-sticky").offset().top,
        scrollPosition = jQuery(window).scrollTop();

    if ($(window).width() < 768) {
        if (scrollPosition >= navOffset + 200) {
            // ...
        } else {
            // ...
        }
    elseif (scrollPosition >= navOffset) {
        // ...
    } else {
        // ...
    }

});

Then just make sure that you're undoing the changes made in other cases before applying the new changes.