使用 hide() 隐藏元素会导致页面"跳转"

Question

我正在尝试创建一种效果，在页面加载时显示一个大徽标。当用户滚动通过徽标和导航时，我想显示一个带有较小徽标的固定导航栏。然后我想隐藏大徽标，这样当用户滚动到顶部时，他们仍然可以看到固定的导航栏(即大徽标和原始导航保持隐藏)

但是，当我删除具有.hide()属性的big block元素时，它会导致页面在设置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();
});

Answer 1

你可以试试这个，

添加新样式

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

并将JS更改为

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

Answer 2

使用visibility:hidden，然后使用

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

Answer 3

也许是因为不同的浏览器-边距/填充。您是否尝试将其添加到主体元素(或者如果继承了一些边距/填充，则添加到容器元素)

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