CODEWITHSUNDEEP
jquery
starvator
starvator

Reputation: 1017

jQuery scroll then fixed

I am trying to make a menu load fixed to the bottom of the page ( position:absolute;bottom:0px; ), but when the user scrolls, I want it to get pinned to the top ( position:fixed;top:0px; ).

Here is my jQuery:

var main = function(){
    var menu = $('#menu')

    $(document).scroll(function(){
        if ( $(this).scrollTop() >= $(window).height() - menu.height() ){
            menu.removeclass('bottom').addclass('top')
        } else {
            menu.removeclass('top').addclass('bottom')
        }
    })
}
$(document).ready(main);

And here is my JSFiddle

I have yet to be able to successfully add the top class.

Any ideas? Thank you!

Upvotes: 0

Views: 3954

Answers (2)

Xm7X
Xm7X

Reputation: 861

You should also terminate your statements and your first jsfiddle has no js library loading.

var main = function(){
   var menu = $('#menu');

   $(document).scroll(function(){
      if ( $(this).scrollTop() >= $(window).height() - menu.height() ){
      menu.removeClass('bottom').addClass('top');
      } else {
      menu.removeClass('top').addClass('bottom');
      }
   });
};
$(document).ready(main);

Upvotes: 0

Suthan Bala
Suthan Bala

Reputation: 3299

You had the capitalization mixed up, as well as you didn't include the jQuery into your JSFiddle. Here's the updated JSFiddle. http://jsfiddle.net/tb2ume6v/1/

var main = function(){
    var menu = $('#menu')

    $(document).scroll(function(){
        if ( $(this).scrollTop() >= $(window).height() - menu.height() ){
        menu.removeClass('bottom').addClass('top')
        } else {
        menu.removeClass('top').addClass('bottom')
        }
    })
}
$(document).ready(main);

Upvotes: 4

Related Questions