Question

我的页面顶部有一个栏。当用户滚过700 px时，jquery将使用以下代码将以前隐藏的徽标放入栏中：

$(window).scroll(function(){
    var posFromTop = $(window).scrollTop();

    if(posFromTop > 700){
    $('#logo').fadeIn(200, function(){
    });

    } else {
    $('#logo').fadeOut(200, function(){
    });
    }
});

效果很好，但我在该栏中有一个链接会在#logo出现时被推下来。如何在#logo出现时阻止链接移动。

链接代码：

<div class="container-fluid" style='height: 50px; background-color:rgba(242, 244, 247, 0.5); width: 100%; position: fixed; top: 0; left: 0; z-index: 30;'>
<a href='#' id='logo' style='font-size: 40px;'>logo</a>
<a href='#t' style='position: absolute; right: 12px;'>Start</a>

徽标代码：

#logo{
display: none;
}

Answer 1

徽标上需要position: absolute，以防止其影响其他内容。

Answer 2

在完成所有脚本工作之前，首先保持两个元素可见并对齐它必须的方式，然后执行脚本。

Jquery FadeIn Messes Up Float Div

2 个答案: