1

I have a main header that is fixed to the top and I have a subnav (which on the real site is for anchor links within the page) which is fixed to the bottom of the window. I then have a hero image which is the height of the window minus the height of the header and minus the height of the subnav. When a user scrolls past the subnav at the bottom, it then sticks to the top just after the main navigation. This all works pretty well at the moment.

Here's an extracted version of how it works on the site that's under development: https://jsfiddle.net/owgvjxdj.

However, the one bug is that when the window is resized, the subnav's position isn't recalculated and so ends up positioned either too high or too low.

I can refactor for the subnav's position by binding an additional window resize event:

// Refactor subnav measurements on window resize
$( window ).resize(function() {

  var windowH = $(window).height();
  var stickToBot = windowH - $('#subnav').outerHeight(true);

  var scrollVal = $(this).scrollTop();
  if ( scrollVal > stickToBot - $('.navbar').outerHeight(true) ) {
      $('#subnav').css({'position':'fixed','top' :'80px'});
  } else {
      $('#subnav').css({'position':'absolute','top': stickToBot +'px'});
  }

});

This works for the initial position, but after scrolling and then resizing the window, the positioning is incorrect: https://jsfiddle.net/owgvjxdj/1/

I know I'm missing something very obvious here but what is it?!

lotech
  • 65
  • 1
  • 2
  • 9

1 Answers1

1

you need to update the windowH again and finally sticktoBot, so make the variables global and update their value when window resizes, here is the fiddle - http://jsfiddle.net/owgvjxdj/4/

Rohit Kumar
  • 2,048
  • 1
  • 14
  • 28