javascript - jQuery toggle element class based on scroll percentage -

javascript - jQuery toggle element class based on scroll percentage -

i want alter var num percentage instead of number of pixels. how can this?

i need site: http://www.sutanaryan.com/tutorials/fixed-menu-when-scrolling-page-with-css-and-jquery/ work pixels, , website works % (because autoscaling illustration on hd screen or total hd screen)

/* dynamic top menu positioning * */

var num = 150 ; //number of pixels before modifying styles 150 $(window).bind('scroll', function () { if ($(window).scrolltop() > num) { $('.menu').addclass('fixed'); } else { $('.menu').removeclass('fixed'); } }); //use scroll wheel fiddle demo

first, allow me tell horrible solution. listening every scroll event , calling addclass() or removeclass() every time expensive. // end preach

here's reply question anyway:

var baseheight = $(window).height(); // body, utilize $("body").height(); var num = .25; // percentage of vertical scroll $(window).bind('scroll', function () { if ($(window).scrolltop() / baseheight > num) { $('.menu').addclass('fixed'); } else { $('.menu').removeclass('fixed'); } });

javascript jquery