我想创建这样一个效果:在页面加载时显示大的标志。当用户滚动超过标志和导航时,我希望显示一个固定的导航栏和较小的标志。然后,我想隐藏大标志,以便当用户滚动到顶部时仍然可以看到固定的导航栏(即大标志和原始导航保持隐藏)。
然而,当我使用
有没有办法实现我想要的效果,同时为用户提供流畅的体验?我一直在考虑潜在的选项,但一直没有头绪。希望你们能给我灵感 :)
这里可以看到一个简单的JS fiddle:http://jsfiddle.net/darudude/vA5WG/(注意:您必须将结果部分增加到720+px才能正常工作 - 我还在处理响应式部分)
相关代码:
.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();
});