Javascript 使用hide（）隐藏元素会导致一个页面；“跳跃”；

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

但是，当我使用

.hide（）

属性删除一个大块元素时，它会导致页面在设置display:none属性时“跳转”。这降低了页面的可用性，因为位置超出了被删除元素的大小，可能会让用户感到困惑

有没有一种方法可以在为用户提供流畅体验的同时达到我想要的效果？我一直在考虑可能的选择，但一直在画空白。希望你们能激励我：）

这里可以看到一个简单的JS提琴：（注意：您必须将结果部分增加到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();
});

---

使用

可见性：隐藏

然后

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

你可以试试这个

添加新样式

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

---

我有一个类似的问题，我想隐藏在页面顶部的图像后，滚动过去。隐藏顶部图像后，滚动条将按我隐藏的偏移量的大小向下跳转页面。这完全是一个黑客行为，但我最终通过了滚动条“跳转”，在隐藏顶部图像后，强制窗口滚动回页面顶部。我不是一个真正的前端人。。。但它成功了，你可以看到它在运行（顺便说一句，该页面在手机上看起来并不好看）

---

可能是因为不同的浏览器-边距/填充。您是否尝试将其添加到body元素（或container元素，如果它继承了一些边距/填充）

---

尝试将不透明度设置为0而不是隐藏…这相当于可见性：隐藏，这不是我想要的效果-我不希望用户向上滚动时顶部出现空白只要将徽标设置为绝对位置或从一开始就固定，它不会出现在流中，因此隐藏不会改变流。。。我现在在iPad上，所以我很难给出一个很好的例子。我不能使用隐藏-当他们滚动到顶部时，我会有一个很大的空白。当他们滚动回顶部时，正常的标题应该会重新出现，不？不-我希望这样当滚动回固定标题时，使用display:none和display:block时，正常的页眉和较大的徽标保持倾斜，但出现了页面跳转。这解决了我的问题。好的，谢谢@nflauria

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

Instead of 

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

    var topOffset = $('#wrapper').offset().top;

    $(window).scroll(function () {
        if($('#home-header').is(':visible')) {
            if($(this).scrollTop() >= topOffset){
                $('#home-header').hide();
                window.scrollTo(0, 0);
            }
        }
    });

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