固定在浏览器底部的元素，直到它到达div的底部

Question

我正在努力制作一些风格差异的网站是https://www.crunchydata.com/。有一个id为#bottom的div当前固定在视口底部，直到你到达页面底部。

我想做的是将它固定在视口的底部，直到它到达div＃main-content（在页脚之前）的底部，然后坐在#main的底部 - 当用户滚动到页脚直到用户向上滚动时的内容。

我认为这需要某种JavaScript解决方案，但是找不到任何足够接近我正在寻找的解决方案。任何指向正确方向的人都会受到赞赏。

Answer 1

您可以添加此JavaScript代码。它适用于所有设备（任何设备宽度或高度）：

＆＃13;

＆＃13;

$(document).ready(function(){

	var scrollPoint;

	$(window).on('load resize scroll', function(){

	scrollPoint = $("#footer").position().top - $(window).height() + $("#bottom").outerHeight();

	if($(window).scrollTop() > scrollPoint){
		$('#bottom').css({
			'position' : 'relative',
			'top' : 0,
			'bottom' : ''
		});
	}else{
		$('#bottom').css({
			'position' : 'fixed',
			'top' : '',
			'bottom' : 0
		});
	}
	});
});

＆＃13;

＆＃13;

＆＃13;

它工作得非常好，没有硬编码。这是输出：

Answer 2

您可能希望了解使用position：sticky。如果您仍在寻找纯JS解决方案，您只需检查用户滚动页面的距离，如果距离足够远，则将元素“锁定”到页面。

示例：

document.body.onscroll=function(){
  var bottom=document.getElementById("bottom");
  if(scrollY+innerHeight>1050){ //position of where you want the element to go + it's height
    bottom.style.position="absolute";
    bottom.style.top="1000px";
    bottom.style.bottom="";
  }
  else{
    bottom.style.position="fixed";
    bottom.style.bottom="0px";
    bottom.style.top="";
  }
}

#bottom{
  position:fixed;
  bottom:0px;
  width:100%;
  height:50px;
  background-color:blue;
}

<div style="height:1000px;width:100%;background-color:red;"></div>
<div style="height:1000px;width:100%;background-color:yellow;"></div>
<div id="bottom"></div>

有点乱，但完成工作。

JSFiddle

Answer 3

这很有效。请检查。

＆＃13;

＆＃13;

document.body.onscroll=function(){
    var bottom=document.getElementById("bottom");
    if(scrollY+innerHeight>1050){ //position of where you want the element to go + it's height
        bottom.style.position="relative";
        bottom.style.top="1000px";
        bottom.style.bottom="";
    }
    else{
        bottom.style.position="fixed";
        bottom.style.bottom="0px";
        bottom.style.top="";
    }
 }

＆＃13;

#bottom{
    position:fixed;
    bottom:0px;
    width:100%;
    height:50px;
    background-color:blue;
}

＆＃13;

<div style="height:1000px;width:100%;background-color:red;">
<div id="bottom" style="width:100%;height:50px;background-color:blue"></div>
</div>
<div style="height:1000px;width:100%;background-color:yellow;"></div>

＆＃13;

＆＃13;

＆＃13;