Banner floating sidebar with Jquery with scroll

Question

Banner floating sidebar with Jquery with scroll

Navigation

#1 by (1 votes)

7

It's the following .. I have a floating banner on my blog that uses 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><divclass="element hidden-xs">
	conteudo

</div>

Just that my floating scroll banner is passing from the rodape .. my rodape starts with tags

I would like some help to modify this JS so it does not get over the footer! My blog is: link

javascript jquery css css3

asked by anonymous 28.02.2015 / 00:17

1 answer

Save files from a DataGridVIew What is the purpose of the "Image" input?

score 1 · Answer 1

You can do this:

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

Your code looks 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 change .addClass('fixed'); by

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

and .removeClass('fixed'); by

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