javascript - 当文档滚动到某个点时链接变为非事件状态

Question

我写了一些 JS 使 div 具有粘性 float 效果，例如:http://dropthebit.com/demos/stickyfloat/stickyfloat.html

但是，当我滚动到某个点时，div 中的链接从上到下一次变为非事件状态。

代码如下:

HTML:

<div id="sticky-float">
    <h4 id="math">MATH</h4>
    <ul>
        <li><a href="math/genstudies.html">General Studies</a></li>
        <li><a href="math/business.html">Finanace &amp; Business</a></li>
        <li><a href="math/engineering.html">Engineering &amp; Technical</a></li>
    </ul>
    <h4>SCIENCE</h4>
    <ul>
        <li><a href="science/prepphysics.html">Preparatory Physics</a></li>
    </ul>
    <h4>MARITIME</h4>
    <ul>
        <li><a href="maritime/maritime.html#shipsuperintendentgeneral">Ship Superintendent (General)</a></li>
        <li><a href="maritime/maritime.html#shipsuperintendentmarine">Ship Superintendent (Marine)</a></li>
        <li><a href="maritime/maritime.html#shipsuperintendenttechnical">Ship Superintendent (Technical)</a></li>
        <li><a href="maritime/maritime.html#breakbulkshipping">Breakbulk Shipping</a></li>
        <li><a href="maritime/maritime.html#lngcargooperations">LNG Cargo Operations</a></li>
        <li><a href="maritime/maritime.html#maritimelogistics1">Maritime Logistics I</a></li>
        <li><a href="maritime/maritime.html#marineengineering">Marine Engineering</a></li>
        <li><a href="maritime/maritime.html#shipoperations">Ship Operations</a></li>
    </ul>
</div>

CSS:

#sticky-float{
    background-color: #a0cbda;
    position: relative;
    top: 20px;
    padding: 10px 10px 10px 30px;
}

#sticky-float,
#sticky-float h4{
    font-family: "FuturaStd-Book";
}

#sticky-float ul{
    list-style-type: none;
    position: relative;
    right: 18px;
}

JS:

$(document).ready(function(){
    var $stickyYInit = $('#sticky-float').offset().top;
    $(document).scroll(function(){
        var $documentY = $(document).scrollTop();
        var $stickyY = $('#sticky-float').offset().top;
        if($documentY+70 >= $stickyYInit){
            $('#sticky-float').css('top', (($documentY+70)-$stickyYInit) + "px");
        }
        if($documentY+50 < $stickyYInit){
            $('#sticky-float').css('top', 20 + "px");
        }
    });
});

非常感谢您的帮助。我在这里不知所措。谢谢大家!!

Answer 1

您的代码与我的代码完美配合，看起来有一个元素覆盖了您网站中的菜单，所以尝试添加z-index 在你的 CSS 所以它会是这样的:

CSS

#sticky-float{
    background-color: #a0cbda;
    position: relative;
    top: 20px;
    padding: 10px 10px 10px 30px;
    z-index: 999;
}

希望这对你有帮助...

---

此外，如果您在 JavaScript 中使用 position: fixed 而不是 position: relative 会更好，所以试试这个:

JavaScript

$(window).on("scroll", function() {
    $("#sticky-float").css("top", Math.max(0, 20 - $(window).scrollTop()));
});

CSS

#sticky-float{
    position: fixed;
    top: 20px;
    z-index: 999;
}