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
Post a Comment