CODEWITHSUNDEEP
jqueryhtmlcssresponsive-designtoggle
surfbird0713
surfbird0713

Reputation: 1219

Show/Hide Element on Scroll for certain width, toggle for other width

I am trying to make a navigation that hides on down scroll and reappears when you scroll up, unless the window width is smaller than 775. If the width is smaller than 775, the behavior should be a toggle of the nav bar with it maintaining the fixed position when scrolling.

I put together a codepen here to demonstrate the problem I'm having. If the window is > 775 when the page loads, it works fine, same with if the window is < 775. The problem is if the window is resized, the behavior gets wonky. If you start small, toggle the nav, and then resize, the navigation doesn't appear until you start scrolling. If you start big, and resize down, the fade in/fade out behavior is present on the navigation.

Now, I realize people probably won't be resizing all the while they're using my site but this is driving me crazy. Surely there must be a way to have my cake and eat it too?

I've tried different conditional statements checking for the css value for display, comparing window widths and also using the jQuery selector :visible. Same results for everything. Can anyone help me? Basically what I want is if #hamburger is showing (display: block), the toggle should be in effect. If #hamburger is sent to display: none, the fadein/fade out should be in effect.

Here's where I am now:

//toggle hamburger icon + menu on mobile
$('#hamburger').click(function() {
    $('nav').toggle();  
});

//hide/show nav on scroll
function hideNav() {    
    var lastScrollTop = 0; 
    $(window).scroll(function(event){
        var st = $(this).scrollTop();
        if (st > lastScrollTop)
            $('nav').fadeOut();  
        else 
            $('nav').fadeIn();
        lastScrollTop = st;
    });
}

//check window size on load
var windowWidth = $(window).width();
if (windowWidth > 775)
    hideNav();

//adjust if the window is resized
function resizeWindow(){
    var newWindowWidth = $(window).width();
    if (newWindowWidth > 775)
        hideNav();           
    else if (newWindowWidth <= 775)
        $('nav').hide();
 }

 $(window).resize(resizeWindow);

Upvotes: 1

Views: 1337

Answers (1)

Pete
Pete

Reputation: 58442

Try this:

$('#hamburger').click(function() {
  $('nav').toggle();
});

function hideNav() {
  var lastScrollTop = 0;
  $(window).on('scroll', function(event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
      $('nav').fadeOut();
    } else {
      $('nav').fadeIn();
    }
    lastScrollTop = st;

  });
}

//check window size
var windowWidth = $(window).width();

if (windowWidth > 775) {
  hideNav();
}

//adjust the nav functionality if the window is resized

function resizeWindow() {
  $(window).off('scroll'); // unbind scroll event

  windowWidth = $(window).width(); // you may as well re-use windowWidth as it's global
  console.log(windowWidth);
  if (windowWidth > 775) {
    $('nav').show();
    hideNav();
  } else if (windowWidth <= 775) {
    $('nav').hide();
  }
}

$(window).resize(resizeWindow);

Updated Pen

Upvotes: 1

Related Questions