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

Question

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

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

我假设这将需要某种 JavaScript 解决方案，但无法找到与我正在寻找的足够接近的任何解决方案。任何指向正确方向的指针都将不胜感激。

Answer 1

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

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

而且它工作得很好，没有硬代码。这是输出：

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

这是有效的。请检查。

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="";
    }
 }

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

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