当滚动到另一个 HTML 元素时，将 CSS 类动态添加到固定 DIV

Question

我在 StackOverflow 上阅读了几个类似的问题，可惜没有一个解决方案对我很有效。

我想在页面向下滚动到另一个 html 元素时向 html 元素动态添加一个 css 类，并在用户向上滚动页面时删除该类。

具体来说，我想将 DIV 元素的 position:fixed 更改为 position:absolute 当它到达页脚 div 的顶部时，这样 DIV 元素就不会被 fixed 到底部屏幕并粘在页脚 div 的顶部，以便它保留在那里，而用户继续向下滚动页面的其余部分。

我尝试调整几个 JavaScript 代码 sn-ps，但没有一个能完全按照我想要的方式工作。这是我最好的尝试：

 $(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');
}
 });
});

我想在#fixedbtn div 滚动到#footer-1 div 顶部时将“fixedPosition”类添加到该类，并在用户向上滚动时删除该类，以便#footer- 1 从视口底部下沉。

在这种情况下，使用与页面顶部的固定像素距离对我不起作用。我希望将类添加到 div 的事件触发器在 div 的顶部出现在用户屏幕底部的视图中时触发。

各位代码诗人，能否指导我找到正确的解决方案以达到预期的结果？

Answer 1

希望对你有帮助

$(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>