jquery - Sticky subnav when scrolling past, breaks on resize -


i have main header fixed top , have subnav (which on real site anchor links within page) fixed bottom of window. have hero image height of window minus height of header , minus height of subnav. when user scrolls past subnav @ bottom, sticks top after main navigation. works pretty @ moment.

here's extracted version of how works on site that's under development: https://jsfiddle.net/owgvjxdj.

however, 1 bug when window resized, subnav's position isn't recalculated , ends positioned either high or low.

i can refactor subnav's position binding 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 initial position, after scrolling , resizing window, positioning incorrect: https://jsfiddle.net/owgvjxdj/1/

i know i'm missing obvious here it?!

you need update windowh again , sticktobot, make variables global , update value when window resizes, here fiddle - http://jsfiddle.net/owgvjxdj/4/


Comments

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -