javascript - Element that is fixed at bottom of browser until it hits the bottom of a div - Stack Overflow

admin管理员组

文章数量:1392081

The website I'm working on making some stylistic differences on is /. There's a div with id #bottom that's currently fixed at the bottom of the viewport until you hit the bottom of the page.

What I'd like to do is have it be fixed at the bottom of the viewport until it reaches the bottom of the div #main-content (right before the footer), and then sit there at the bottom of #main-content as the user scrolls past into the footer until the user scrolls back up.

I'm assuming this will require some sort of JavaScript solution, but haven't been able to find any solution quite close enough to what I'm looking for. Any pointers in the right direction would be appreciated.

The website I'm working on making some stylistic differences on is https://www.crunchydata./. There's a div with id #bottom that's currently fixed at the bottom of the viewport until you hit the bottom of the page.

What I'd like to do is have it be fixed at the bottom of the viewport until it reaches the bottom of the div #main-content (right before the footer), and then sit there at the bottom of #main-content as the user scrolls past into the footer until the user scrolls back up.

I'm assuming this will require some sort of JavaScript solution, but haven't been able to find any solution quite close enough to what I'm looking for. Any pointers in the right direction would be appreciated.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Apr 12, 2017 at 18:33 IAspireToBeGladOSIAspireToBeGladOS 1,48433 gold badges2222 silver badges3636 bronze badges 4

• Do you want that: position of #bottom will be fixed until user scroll at the bottom of the #content section. Then, when user scroll under #content then the position of the #bottom will be relative? – Jitu Raiyan Commented Apr 12, 2017 at 18:43
• look for position:sticky and polyfills that goes with it ... – G-Cyrillus Commented Apr 12, 2017 at 18:44
• @JituRaiyan, yes, that's exactly what I'm looking for! – IAspireToBeGladOS Commented Apr 12, 2017 at 18:46
• Ok, I'll try to solve this – Jitu Raiyan Commented Apr 12, 2017 at 18:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You might want to look into using position:sticky. If you're still looking for a pure JS solution, you can simply check how far down the page the user has scrolled, and if it is far enough, "lock" the element to the page.

Example:

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>

A bit messy, but gets the job done.

JSFiddle

You can add this JavaScript code. It works fine in all devices (any device width or height):

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

And it's working very fine and there is no hard code. Here is the output:

This is working. Please check.

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>

本文标签： javascriptElement that is fixed at bottom of browser until it hits the bottom of a divStack Overflow