Question

当用户将其滚动到浏览器顶部上方80px的位置时，我已经设法将其设置为固定div。

这很有效。它停留在top：initial位置，然后在滚动时更改为fixed和top：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设置为浮动菜单，然后还尝试阻止其击中底部的子页脚，但在滚动时使其保持在其上方下来。

阻止Div在打到页脚时被固定，同时还控制从页眉固定它的时间

0 个答案: