javascript - Android Chrome 固定菜单弹出和弹出 url 消失

Question

编辑:这是一个说明我的问题的 Youtube 视频: http://youtu.be/OguwjZR_GdU

在我的网站上 Black Star Opal我一直在尝试实现一个粘性菜单，很像这个 Dansk Kids .我查看了 Dansk Kids 网站的 javascript 和 CSS:他们的菜单中似乎没有涉及 javascript(除了在滚动时删除了粘性菜单下方的 Logo )。我希望我的粘性菜单尽可能像他们的一样流畅(即在弹出和弹出时与 url 栏保持齐平)。

这是我的#carttrans 的 css，菜单 div:

position: fixed;
-webkit-backface-visibility: hidden;
height: 49px;
top: 0px;
left: 0px;
background-color: rgb(255, 255, 255);
width: 100% !important;
z-index: 10000;
text-align: center;
margin-left: 0px;
padding-left: 7px;
border: 1px solid rgb(221, 221, 221);
border-left: none;
border-right: none;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: rgb(221,221,221) !important;
-webkit-transform: translateZ(0);

我也使用这个 js 代码(只是因为没有它菜单不会在 iOS Safari 上显示，虽然我不确定为什么):

$(function() {
// grab the initial top offset of the navigation 
var sticky_navigation_offset_top = $('#carttrans').offset().top;

// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top

if ($(window).width() < 500)
{
  // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
  if (scroll_top > sticky_navigation_offset_top) { 
  $('#carttrans').css({ 'position': 'fixed', 'top':0, 'left':0 });
  } else {
  $('#carttrans').css({ 'position': 'fixed' }); 
  }   
}
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
  sticky_navigation();
});
});

我什至删除了菜单中的所有元素，只留下空白的白色条，看看它是否会做同样的事情。它像以前一样笨拙地进进出出。

任何对此的帮助都会很棒。

编辑:正如我在下面所说的，URL 栏的弹出和弹出似乎打扰了我的粘性菜单。这可能是重绘问题或速度变慢，因为在其他站点上，url 栏的消失和菜单的后续移动(例如，在粘性菜单演示中)非常流畅，我正在做/已经测试过它们弹出相同的网址栏。

干杯，罗布

Answer 1

HTML

<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />

jQuery(记得包含jquery库)

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
     $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

CSS:

header{
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 72px;
  line-height: 108px;
  height: 108px;
  background: #335C7D;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
}
header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
  transition: all 0.4s ease;
}

引用资料: http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/

上一个关于堆栈溢出的相同问题: CSS Sticky header