使用hide()隐藏元素会导致页面出现“跳动”问题

Question

我想创建这样一个效果：在页面加载时显示大的标志。当用户滚动超过标志和导航时，我希望显示一个固定的导航栏和较小的标志。然后，我想隐藏大标志，以便当用户滚动到顶部时仍然可以看到固定的导航栏（即大标志和原始导航保持隐藏）。 然而，当我使用.hide()属性删除一个大的块元素时，它会导致页面“跳动”，因为display:none属性被设置。这会降低页面的可用性，因为位置会跳跃到已删除元素的大小，可能会让用户感到困惑。

有没有办法实现我想要的效果，同时为用户提供流畅的体验？我一直在考虑潜在的选项，但一直没有头绪。希望你们能给我灵感 :)

这里可以看到一个简单的JS fiddle：http://jsfiddle.net/darudude/vA5WG/（注意：您必须将结果部分增加到720+px才能正常工作 - 我还在处理响应式部分）

相关代码：

function UpdateTableHeaders() {

    var menu       = $(".main_nav_menu"),
    offset_top     = menu.offset().top;

    var scrollTop  = $(window).scrollTop();

    if (scrollTop > (offset_top + menu.height()))
    {
        $(".clone").addClass("floating_header");
        $(".big_logo").hide();
    }
}
$(window).scroll(function(){
    UpdateTableHeaders();
});

- darudude

---

尝试将不透明度设置为0而不是隐藏... - Shashank

这相当于visibility:hidden，但这不是我想要的效果 - 当用户向上滚动时，我不想要顶部的空白区域。 - darudude

只需从一开始将您的标志设置为绝对或固定位置，它就不会在流程中，因此隐藏它不会改变流程...但我现在正在使用iPad，所以很难给出一个好的例子。 - Laurent S.

Answer 1

你可以尝试这个，

添加一个新样式。

<style>
        .hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}
</style>

将您的 JS 更改为：

$(".big_logo").addClass('hide');

Instead of 

$(".big_logo").hide(); 

- Dimag Kharab

---

之前使用了display: none和display: block，但是页面会跳动。这个方法解决了我的问题。 - nflauria

Answer 2

也许是因为不同的浏览器 - 边距/填充问题。你尝试过在body元素中添加此内容吗（或者如果它继承了一些边距/填充，则添加到容器元素中）？

body{
    margin:0;
    padding:0;
    width:100%;
}

- Lachezar Raychev

Answer 3

使用visibility:hidden。

$(".big_logo").css('visibility','hidden');

- Bhojendra Rauniyar

---

我不能使用隐藏 - 当他们滚动到顶部时，会有很大的空白。 - darudude

当他们滚动回顶部时，正常的标题应该重新出现，对吧？ - Chris Herbert

不，我希望当滚动回去时，固定的标题保持不变，普通的标题和更大的标志仍然消失。 - darudude