Остановка фиксированное положение в футере

Я только что решил эту проблему на сайте, над которым работаю, и подумал, что поделюсь ею в надежде, что это кому-то поможет.

мое решение принимает расстояние от нижнего колонтитула до верхней части страницы - если пользователь прокрутил дальше, чем это, он тянет боковую панель обратно с отрицательным полем.

$(window).scroll(function () { 

// distance from top of footer to top of document
footertotop = ($('#footer').position().top);
// distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding)
scrolltop = $(document).scrollTop()+570;
// difference between the two
difference = scrolltop-footertotop;

// if user has scrolled further than footer,
// pull sidebar up using a negative margin

if (scrolltop > footertotop) {

$('#cart').css('margin-top',  0-difference);
}

else  {
$('#cart').css('margin-top', 0);
}


});

я столкнулся с этой же проблемой недавно, опубликовал мое решение также здесь: предотвращение отображения элемента поверх нижнего колонтитула при использовании position: fixed

вы можете достичь решения, используя position свойства элемента с jQuery, переключение между значением по умолчанию (static на divs),fixed и absolute. Вам также понадобится элемент контейнера для вашего фиксированного элемента. Наконец, чтобы предотвратить переход фиксированного элемента через нижний колонтитул, этот элемент контейнера не может быть родительским элементом нижнего колонтитула.

часть javascript включает в себя вычисление расстояния в пикселях между вашим фиксированным элементом и верхней частью документа и сравнение его с текущим вертикальным положением полосы прокрутки относительно объекта окна (т. е. количество пикселей выше, которые скрыты от видимой области страницы) каждый раз, когда пользователь прокручивает страницу. Когда при прокрутке вниз фиксированный элемент собирается исчезнуть выше, мы измените его положение на фиксированное и приклейте сверху страницы.

это заставляет фиксированный элемент перейти через нижний колонтитул при прокрутке вниз, особенно если окно браузера мало. Поэтому мы рассчитаем расстояние в пикселях нижнего колонтитула от верхней части документа и сравним его с высотой фиксированного элемента плюс вертикальное положение полосы прокрутки: когда фиксированный элемент собирается перейти через нижний колонтитул, мы изменим его положение на абсолютное и придерживайтесь нижней части, как раз над Нижним колонтитулом.

вот общий пример.

структура HTML:

<div id="content">
    <div id="leftcolumn">
        <div class="fixed-element">
            This is fixed 
        </div>
    </div>
    <div id="rightcolumn">Main content here</div>
    <div id="footer"> The footer </div>
</div>  

CSS-код:

#leftcolumn {
    position: relative;
}
.fixed-element {
    width: 180px;
}
.fixed-element.fixed {
    position: fixed;
    top: 20px;
}
.fixed-element.bottom {
    position: absolute;
    bottom: 356px; /* Height of the footer element, plus some extra pixels if needed */
}

JS:

// Position of fixed element from top of the document
var fixedElementOffset = $('.fixed-element').offset().top;
// Position of footer element from top of the document.
// You can add extra distance from the bottom if needed,
// must match with the bottom property in CSS
var footerOffset = $('#footer').offset().top - 36;

var fixedElementHeight = $('.fixed-element').height(); 

// Check every time the user scrolls
$(window).scroll(function (event) {

    // Y position of the vertical scrollbar
    var y = $(this).scrollTop();

    if ( y >= fixedElementOffset && ( y + fixedElementHeight ) < footerOffset ) {
        $('.fixed-element').addClass('fixed');
        $('.fixed-element').removeClass('bottom');          
    }
    else if ( y >= fixedElementOffset && ( y + fixedElementHeight ) >= footerOffset ) {
        $('.fixed-element').removeClass('fixed');           
        $('.fixed-element').addClass('bottom');
    }
    else {
        $('.fixed-element').removeClass('fixed bottom');
    }

 });

вот решение @Sang, но без Jquery.

var socialFloat = document.querySelector('#social-float');
var footer = document.querySelector('#footer');

function checkOffset() {
  function getRectTop(el){
    var rect = el.getBoundingClientRect();
    return rect.top;
  }
  
  if((getRectTop(socialFloat) + document.body.scrollTop) + socialFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 10)
    socialFloat.style.position = 'absolute';
  if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
    socialFloat.style.position = 'fixed'; // restore when you scroll up
  
  socialFloat.innerHTML = document.body.scrollTop + window.innerHeight;
}

document.addEventListener("scroll", function(){
  checkOffset();
});

div.social-float-parent { width: 100%; height: 1000px; background: #f8f8f8; position: relative; }
div#social-float { width: 200px; position: fixed; bottom: 10px; background: #777; }
div#footer { width: 100%; height: 200px; background: #eee; }

<div class="social-float-parent">
    <div id="social-float">
        float...
    </div>
</div>
<div id="footer">
</div>

это сработало для меня -

HTML -

<div id="sideNote" class="col-sm-3" style="float:right;">

</div> 
<div class="footer-wrap">
        <div id="footer-div">
        </div>      
</div>

CSS -

#sideNote{right:0; margin-top:10px; position:fixed; bottom:0; margin-bottom:5px;}

#footer-div{margin:0 auto; text-align:center; min-height:300px; margin-top:100px; padding:100px 50px;}

JQuery -

function isVisible(elment) {
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elment).offset().top;

    return y <= (vpH + st);
}

function setSideNotePos(){
    $(window).scroll(function() {
        if (isVisible($('.footer-wrap'))) {
            $('#sideNote').css('position','absolute');
            $('#sideNote').css('top',$('.footer-wrap').offset().top - $('#sideNote').outerHeight() - 100);
        } else {
            $('#sideNote').css('position','fixed');
            $('#sideNote').css('top','auto');
        }
    });
}

теперь вызовите эту функцию следующим образом -

$(document).ready(function() {
    setSideNotePos();
});

PS-функции Jquery копируются из ответа на другой аналогичный вопрос в stackoverflow, но он не работал для меня полностью. Поэтому я изменил его на эти функции, как они показаны здесь. Я думаю, что атрибуты позиции etc для ваших divs будут зависеть от того, как divs структурированный, кто их родители и братья и сестры.

вышеуказанная функция работает когда и sideNote и футер-обручи сразу братья и сестры.

Я пошел с модификацией ответа @user1097431:

function menuPosition(){
// distance from top of footer to top of document
var footertotop = ($('.footer').position().top);
// distance user has scrolled from top, adjusted to take in height of bar (42 pixels inc. padding)
var scrolltop = $(document).scrollTop() + window.innerHeight;
// difference between the two
var difference = scrolltop-footertotop;

// if user has scrolled further than footer,
// pull sidebar up using a negative margin
if (scrolltop > footertotop) {
    $('#categories-wrapper').css({
       'bottom' : difference
   });
}else{
    $('#categories-wrapper').css({
       'bottom' : 0
   });
 };
};