Question

我想知道如何在击中顶部时使导航条闪烁。

我正在使用bootstrap navbar和jquery脚本使其在向下滚动时保持在顶部，但是如果没有jquery循环它们的'fadein / out'功能，我就无法使它闪烁。

我可以使用其他任何选项吗？

$(function(){

    var advancedNav = $('#custom-bootstrap-menu').offset().top;

    $(window).scroll(function(){
        if( $(window).scrollTop() > advancedNav ) {
                $('#custom-bootstrap-menu').css({position: 'fixed', top: '0px'});
                $('#custom-bootstrap-menu').css('display', 'block');
                $('#custom-bootstrap-menu').css('width', "100%");          
        } else {
                $('#custom-bootstrap-menu').css({position: 'static', top: '0px'});
                $('#custom-bootstrap-menu').css('display', 'block');
        }
    });

Answer 1

这可能是因为当您将位置设置为“固定”时，您将从布局中移除元素，因此窗口滚动会发生变化...您需要考虑的是菜单的高度，使其包裹在内部一个固定的高度div。试试这个......

<div style="height: 400px">
 <nav id="custom-bootstrap-menu">...</nav>
</div>

Answer 2

试试这个，

$(function(){   

$(window).scroll(function(){
    if( $(window).scrollTop() == 0) {
            $('#custom-bootstrap-menu').css({position: 'fixed', top: '0px'});
            $('#custom-bootstrap-menu').css('display', 'block');
            $('#custom-bootstrap-menu').css('width', "100%");          
    } else {
            $('#custom-bootstrap-menu').css({position: 'static', top: '0px'});
            $('#custom-bootstrap-menu').css('display', 'block');
    }
});

击中顶部时闪烁导航

2 个答案: