html 浮メニューをフッターまできたら固定する

Posted 2021-05-11

//スクロールしたらフェードイン
$(function() {
	var topBtn = $("#float");	
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
});

//<footer>まできたら固定
$(window).on('scroll',function(){
	var footerHeight = parseInt($('footer').css('height'));
	var scrollHeight = $(document).height() - footerHeight;
	var scrollPosition = $(window).height() + $(window).scrollTop();
 
	if ((scrollHeight - scrollPosition) / scrollHeight <= 0) {
		$('#float').css('position','relative');
		$('footer').css('margin-bottom','0px');
	} else {
		$('#float').css('position','fixed');
		$('footer').css('margin-bottom','178px');
	}
});

#float {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
}

<div id="float">
hogehoge
</div>