Question

我写了一些JS来使div具有粘性浮动效果，如：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 strong> 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;
}

Answer 2

另一种方法

JS

var $documentY, $sticky, $stickyY;
$(document).ready(function(){
    $sticky = $('#sticky-float');
    $stickyY = $sticky.offset().top;
    $(document).scroll(function(){
        $documentY = $(document).scrollTop();
        if ($documentY >= $stickyY && $sticky.hasClass('stick')) return;
        $sticky.attr('class', ($documentY >= $stickyY) ? "stick" : "");
    });
});

CSS

.stick { position:fixed; top:20px; z-index:99; -webkit-transition:top 500ms ease; transition:top 500ms ease;}

当文档滚动超过某个点时，链接将变为非活动状态

2 个答案:

CSS

的JavaScript

CSS

JS

CSS