Dynamically Add CSS Class to Fixed DIV when it is scrolled to another HTML element

Question

I read several similar questions here on StackOverflow, alas none of the solutions quite worked for me.

I want to dynamically add a css class to html element when it is scrolled down the page past another html element and remove the class when the user scrolls back up the page.

Specifically, I want to change position:fixed of a DIV element to position:absolute when it reaches the top of the footer div, so that effectively the DIV element stops being fixed to the bottom of the screen and sticks at the top of the footer div, so that it remains there, while the user continues to scroll down the rest of the page.

I tried adapting several JavaScript code snippets, but none worked the exact way I want it to. Here is my best try:

 $(function() {
  var menu = $('#fixedbtn');
 $(window).scroll(function() {
   var scroll = $(window).scrollTop();

if (scroll >= $('#footer-1').offset().top) { // check the offset top
  menu.addClass('fixedPosition');
} else { // check the scrollHeight
  menu.removeClass('fixedPosition');
}
 });
});

I want to add the class "fixedPosition" to the #fixedbtn div when it is scrolled past the top of the #footer-1 div, and also remove the class, when the user scrolls back up, so that #footer-1 sinks back off the viewport bottom.

Using fixed pixel distances from page top does not work for me in this case. I want the event trigger that will add the class to the div to fire when the top of the <#footer-1> div comes in view on user's screen bottom.

Could you, fellow code-poets, kindly guide me to the correct solution to achieving the desired results?

mhrabiee · Accepted Answer · 2019-11-12 10:01:44Z

2

Hope this helps

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

    function isInViewport($this) {
        var elementTop = $this.offset().top;
        var elementBottom = elementTop + $this.outerHeight();
        var viewportTop = $(window).scrollTop();
        var viewportBottom = viewportTop + $(window).height();
        if (elementTop < viewportBottom == true) {
            menu.addClass('fixedPosition');
        } else {
            menu.removeClass('fixedPosition');
        }
    }

    $(window).scroll(function () {
        isInViewport($('#footer-1'))
    });
});

.conatiner {
  height: 2000px;
}

#footer-1 {
  background-color: red;
  position: relative;
}

#fixedbtn {
  background-color: blue;
  width: 55px;
  height: 20px;
  position: fixed;
  left: 0;
  bottom: 0;
}

#fixedbtn.fixedPosition {
  background-color: white;
  position: absolute;
  left: 0;
  top: 0;
}

.stuck {
  height: 800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="conatiner">
    <div class="stuck">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
            dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
            suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
            vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
            accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
            nulla facilisi.</p>
    </div>

    <div id="footer-1">
        <div id="fixedbtn">
            fixedbtn
        </div>
        #footer-1
    </div>
</div>

edited Nov 12, 2019 at 10:01

mhrabiee

82510 silver badges23 bronze badges

answered Sep 1, 2017 at 17:35

Amal

3,4261 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ivetame Over a year ago

Beautiful! :-) I contemplated your code with awe. Then, it worked perfectly. Wonderful solution! Thank you, Amal Zi, for the help & the lesson. :) P.S. It's interesting to note that the code still works, regardless if I add an empty class="" holder in the DIV tag or not. The Code adds the whole thing! :-D

ivetame Over a year ago

I tried implementing your code into Magento 2.1 template file. I tried all kinds of formats with no success. It just won't work. Do you have any idea why? I'll much appreciate your help on that. :) Here is more info about the issue in this magento stackexchange question: magento.stackexchange.com/questions/192013/…

Amal Over a year ago

i will look into it:)

ivetame Over a year ago

Found the solution. It was the " $(window).scroll(function() { " part, replaced it with " window.addEventListener("scroll", function() { " and it all worked as it should. :-)

Collectives™ on Stack Overflow

Dynamically Add CSS Class to Fixed DIV when it is scrolled to another HTML element

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related