Weebly

Фиксированный футер, появляющийся при прокрутке страницы

HTML:

<div id="fixed-footer">
    <div class="container">{fixed-footer:content}</div>
</div>

CSS:

#fixed-footer {
    position: fixed;
    left:0;
    bottom: 0;
    background: green;
    width: 100%;
    z-index: 10;
    display:none;
}
#fixed-footer .container {
    padding:1.5em;
}

Если нужно, чтобы футер не отображался на мобильных устройствах, можно добавить:

@media screen и (max-width: 767px) { 
  # fixed-footer { 
      display: none; 
  } 
}

jQuery:

$(window).scroll(function() 
{
     //if  ($(window).scrollTop() == $(document).height() - $(window).height())
	 if($(window).scrollTop() + $(window).height() >= $(document).height()- 200)
     {
          $('#fixed-footer').css('display','block');
     }
	 else 
	 {
	      $('#fixed-footer').css('display','none');
	 }
});

Панель будет появляться при прокрутке до конца страницы минус 200px (закомментированная строчка - до конца страницы).

Разделенная секция

HTML:

<div class="container">
    <div class="left">{left:content}</div>
    <div class="right">{right:content}</div>
</div>

CSS:

/*Разделенная секция*/
.split-section .container {
    display:table;
    width:100%;
    padding:0;
}

.split-section .left,
.split-section .right {
    display:table-cell;
    vertical-align:middle;
    width:50%;
    padding: 4em;
    box-sizing: border-box;
}

.split-section .left {
    background:#f1f1f2; /* background color левой части */
}

.split-section .right {
    background:#009bff; /* background color правой части */
}

@media screen and (max-width:767px) {
    .split-section .left,
    .split-section .right {
        width:100%;
        display:block;
    }
}