Question

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

我希望动态地将hss元素添加到html元素，当它向下滚动页面经过另一个html元素，并在用户向上滚动页面时删除该类。

具体来说，我想改变位置：将DIV元素固定到位置：当它到达页脚div的顶部时为绝对，这样有效的DIV元素就会停止固定到底部屏幕并粘贴在页脚div的顶部，以便它保持在那里，同时用户继续向下滚动页面的其余部分。

我尝试调整了几个JavaScript代码段，但没有一个按照我想要的方式工作。这是我最好的尝试：

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

我想添加类＆＃34; fixedPosition＆＃34; #finnerbtn div滚动到＃footer-1 div的顶部时，当用户向上滚动时删除该类，以便＃footer-1从视口底部退回。

在这种情况下，使用页面顶部的固定像素距离对我不起作用。我希望事件触发器将类添加到div，以便在＆lt;＃footer-1＆gt;的顶部触发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'))
});
});

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

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

1 个答案: