CODEWITHSUNDEEP
javascriptjquery
Nboy
Nboy

Reputation: 56

jQuery toggle element class based on scroll percentage

I want to change the var num into a percentage instead of a number of pixels. how can I do this?

I need this for my site: http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/ But they work with pixels, and my website works with % (because autoscaling for example on a HD screen or a Full 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 FOR THIS FIDDLE DEMO

Upvotes: 0

Views: 948

Answers (1)

Rodney G
Rodney G

Reputation: 4826

First, let me tell you this is a horrible solution. Listening to every scroll event and calling addClass() or removeClass() every time is expensive. // end preach

Here's the answer to your question anyway:

var baseHeight = $(window).height(); // for body, use $("body").height();
var num = .25; // this the percentage of vertical scroll

$(window).bind('scroll', function () {
    if ($(window).scrollTop() / baseHeight > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

Upvotes: 1

Related Questions