Question

我正在尝试创建一个效果，我在页面加载时显示一个大徽标。当用户滚动浏览徽标和导航时，我想显示一个带有较小徽标的固定导航栏。然后，我想要隐藏大徽标，以便当用户滚动到顶部时，他们仍然会看到固定的导航栏（即大徽标和原始导航保持隐藏状态）。

但是，当我删除具有.hide()属性的大块元素时，它会导致页面“跳转”，因为display：none属性已设置。这会降低页面的可用性，因为位置会跳过已删除元素的大小，从而可能会使用户感到困惑。

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

这里可以看到一个简单的JS小提琴：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

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

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

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

Answer 2

使用visibility:hidden然后

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

Answer 3

你可以试试这个，

添加新样式

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

并将您的JS更改为

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

Instead of 

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

Answer 4

也许是因为不同的浏览器 - 边距/填充物。您是否尝试将此添加到body元素（如果它继承了一些边距/填充，则添加到容器元素）

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

用hide（）隐藏元素会导致页面“跳转”

4 个答案: