Floating banner sidebar with Jquery accompanies scroll

Question

is the following.. i have a floating banner on my blog using the following JS

$(function(){

	var jElement = $('.element');

	$(window).scroll(function(){
		if ( $(this).scrollTop() > 2000 ){
			jElement.css({
				'position':'fixed',
				'top':'30px',
				'width':'360px'
			});
		}else{
			jElement.css({
				'position':'relative',
				'top':'30px'
			});
		}
	});

.element {
	width: 100%;
	margin-top: 30px;
	padding: 10px;
	background: #f9f9f9;
	text-align: center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="element hidden-xs">
	conteudo

</div>

only that my floating scroll banner is passing the footer. my footer starts with tags

I would like a help to modify this JS so it does not get over the footer! My blog is: http://www.aisenhor.com.br

Answer 1

You can do it like this:

// seguir o footer
if (scroll + alturaSidebar > alturaPagina - alturaFooter) sidebar.css('top', alturaPagina - scroll - alturaSidebar - alturaFooter);
else sidebar.css('top', 30);

In your code it can look like this:

var sidebar = jQuery('.element');
var alturaFooter = jQuery('.rodape').height();
var alturaPagina = jQuery(document.body).height();
var alturaSidebar = sidebar.height();

jQuery(window).scroll(function () {

    // colar o sidebar
    var threshold = 2000;
    var scroll = jQuery(window).scrollTop();
    if (scroll >= 20) sidebar.addClass('fixed');
    else sidebar.removeClass('fixed');

    // seguir o footer
    if (scroll + alturaSidebar > alturaPagina - alturaFooter) sidebar.css('top', alturaPagina - scroll - alturaSidebar - alturaFooter);
    else sidebar.css('top', 30);

});

This suggestion is using a CSS class. If you want to do as you have, forcing in the style of the element you can swap .addClass('fixed'); for

.css({ 'position':'fixed'});

and .removeClass('fixed'); for

.css({ 'position':'relative'});