CODEWITHSUNDEEP
javascriptjqueryhtmlcss
justin.esders
justin.esders

Reputation: 1416

Changing to fixed positioning when scroll position is at bottom

Basically, I am checking to see if the scroll position is at the bottom of the page and adding and remove a class based on that. However when removing the fixed class I can't scroll to the bottom of the page. The browser already assumes I am at the bottom. How can I correct this? If this doesn't make sense please let me know. Below is my code:

JavaScript :

function fixedToRelative(){
    var scrollPos = $(window).scrollTop() + $(window).height();
    if(scrollPos == $(document).height()) {
        $('.mobile.full').removeClass('fixed');
    } else {
        $('.mobile.full').addClass('fixed');
    }
}

Css :

.mobile { position:relative; }
.mobile.fixed { position:fixed; bottom:0; left:0; right:0; }

enter image description here

Upvotes: 0

Views: 1506

Answers (1)

Derek Story
Derek Story

Reputation: 9583

I think you are trying to append add the .fixed class when you scroll to the bottom of the page. If so, you could do something like:

Codepen

$(window).on('scroll', function(){
    var scrollPos = $(this).scrollTop() + $(this).height(); // Current Scroll position plus height of window
    var atBottom = (scrollPos == $(document).height()); // Returns true/false based on if at bottom
    $('.mobile').toggleClass('fixed', atBottom); // If at bottom of page, fixed class is appended
});

Upvotes: 1

Related Questions