Остановить Div от исправления при попадании в нижний колонтитул, а также контролировать, когда он фиксируется из заголовка - PullRequest
Новая
       21

Остановить Div от исправления при попадании в нижний колонтитул, а также контролировать, когда он фиксируется из заголовка

0 голосов
/ 26 июня 2019

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

Это работает угощение.Он остается в верхнем положении: начальная позиция, а затем при прокрутке изменяется на фиксированный и верхний: 80px ...

Теперь мне нужно каким-то образом заставить его перестать перекрывать мой нижний колонтитул в нижней части страницы.

Я пытался искать решения в SO, но все решения, которые я нашел, не работают, потому что я устанавливаю «верхний» CSS ... а решения пытаются установить «нижний»'в определенный момент.

jQuery: 

    var navTop = $('.floating-menu').offset().top - 80;

$(window).scroll(function(){
    if ($(this).scrollTop() >= navTop) {
        $('.floating-menu').css('position', 'fixed');
        $('.floating-menu').css('top', '80px');
    } else {
        $('.floating-menu').css('position', 'relative');
        $('.floating-menu').css('top', 'initial');
    }
});

HTML: 

<div class="content-block active" id="starting">
<div class="floating-menu">
        Floating menu content
    </div>
<div class="new-container">
    Some content in here.
</div>
</div>


<div class="content-block" id="second">
    <div class="new-container">
    Some content in here.
</div>
</div>

<div class="content-block" id="third">
    <div class="new-container">
    Some content in here.
</div>
</div>

<div class="subfooter">
    a lot of Subfooter content
</div>

CSS: 

.floating-menu {
   position: relative;
   top: initial;
   float:left;
}

Мне нужно найтиспособ сохранить код, который у меня есть, установить верхний CSS для плавающего меню, а также затем попытаться остановить его попадание в нижний колонтитул внизу, но заставить его оставаться над ним при прокрутке вниз.

...