jQuery addClass example

Change class name on click in jQuery

HTML

<div class="shit">
  <span>Мы тут просто так.</span>
  <span>Мы типа фон.</span>
</div>

<div class="toster">
  Toster, помоги ошалелому!
</div>

<div class="container">

	<h2><i style=" color: #F44336; background: rgba(255, 0, 0, 0.15); "><svg xmlns="http://www.w3.org/2000/svg" class="mdl-js" viewBox="0 0 47.971 47.971">
  <path d="M28.228 23.986L47.092 5.122a2.998 2.998 0 0 0 0-4.242 2.998 2.998 0 0 0-4.242 0L23.986 19.744 5.121.88a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242l18.865 18.864L.879 42.85a2.998 2.998 0 1 0 4.242 4.241l18.865-18.864L42.85 47.091c.586.586 1.354.879 2.121.879s1.535-.293 2.121-.879a2.998 2.998 0 0 0 0-4.242L28.228 23.986z"/>
</svg></i>CSS-подход выдает косой результат при наведении</h2>

<h3>Что логично, ибо блок .button – на абсолютном позиционировании, поэтому его высота не учитывается при подсчете высоты figure.item. Да и высота блока .button всегда разная в зависимости от его содержимого, что не позволяет задать жесткие габариты. Засим, .shadow (блок с белой подложкой + тенью) не покрывает всю контентную часть. Более того, по причине наличия тени с размытием, нельзя сделать составной блок. Короче, <s>говно выходит</s> зона кнопки и доп. информации вылетает за пределы:</h3>
	
	<figure class="item">
    <div class="shadow"></div>
		<div class="image"><!--<img src="https://source.unsplash.com/random/400x300" alt="">--></div>
		<p>Текст</p>
		<div class="button">
			<p>Дополнительный контент о товаре Дополнительный контент о товаре</p>
			<button>Кнопка, ага</button>
		</div>
	</figure>

	<figure class="item">
		<div class="shadow"></div>
		<div class="image"><!--<img src="https://source.unsplash.com/random/400x300" alt="">--></div>
		<p>Текст</p>
		<div class="button">
     		<p>Дополнительный контент о товаре</p>
			<button>Кнопка, ага</button>
		</div>
	</figure>

	<figure class="item">
		<div class="shadow"></div>
		<div class="image"><!--<img src="https://source.unsplash.com/random/400x300" alt="">--></div>
		<p>Большой...

CSS

body {
    margin: 0;
    padding: 0 0 0 0;
    font: 16px Montserrat, sans-serif;
    background: #fff;
    position: relative;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/**/
.shit {
    position: relative;
    width: 100%;
    height: 200px;
    background: url(https://media.istockphoto.com/illustrations/comparison-between-human-and-gorilla-skeleton-illustration-id973837122) no-repeat center top;
    background-size: 360px;
    transform: scale(1, -1);
    margin-bottom: 30px;
    transition: transform .5s;
}

.shit span {
    transform: scale(1, -1);
    display: inline-block;
    position: absolute;
}

.shit span:before {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 40px 0 0 0;
    border-top: 2px dashed;
    border-left: 2px dashed;
    display: block;
    position: absolute;
    top: -37px;
    right: 10px;
    opacity: .25;
}

.shit span:nth-child(1) {
    left: calc(50% - 285px);
    bottom: 80px;
    color: #03A9F4;
}

.shit span:nth-child(1):before {
    top: -37px;
    right: 10px;
}

.shit span:nth-child(2) {
    left: calc(50% + 131px);
    bottom: 120px;
    color: #E91E63;
}

.shit span:nth-child(2):before {
    top: -37px;
    left: 10px;
    transform: scale(-1, 1);
}

/**/
.toster {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 50px 0;
}

/**/
.note {
    position: fixed;
    bottom: 15px;
    padding: 15px;
    width: 300px;
    font-size: .75em;
    text-align: center;
    background: #673AB7;
    z-index: 100;
    border-radius: 10px;
    line-height: 1rem;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    transition: transform .5s;
}

.note svg {
    display: inline-block;
    width: 20px;
    margin: 0 5px 5px 5px;
}

.note #cross {
    fill: #fff;
    margin: 0;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 14px;
    cursor: pointer;
}

.note.is--hidden {
    transform:...

JavaScript

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 300) {
       $('.note').addClass('is--hidden');
   }
   else {
   	$('.note').removeClass('is--hidden');
   }
});

$(".note #cross").on( "click", function() {
	$(".note").toggle();
});


//
$("figure.item").each(function() {

    var shadowHeight = $(this).find('.shadow').height();
    console.log("shadow", shadowHeight)
////////////////////////
var shadow = $(this).find('.shadow');
var button = $(this).find('.button');

shadow.height(shadow.height() + button.height() + 20)
////////////////////////
    var buttonHeight = $(this).find('.button').height();
    console.log("button", buttonHeight)

    var finalHeight  = shadowHeight+buttonHeight;
	console.log("total", finalHeight)
	console.log("* * *")

    $(this).find('.shadow').css("height","calc(100% - ' + finalHeight + 'px)");

});