Android Chrome固定菜单弹出和弹出url消失答案

【问题标题】：Android Chrome fixed menu popping in and out with url disappearingAndroid Chrome固定菜单弹出和弹出url消失
【发布时间】：2015-01-28 17:34:50
【问题描述】：

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

在我的网站Black Star Opal 上，我一直在尝试实现一个粘性菜单，就像这个Dansk Kids。我查看了 Dansk Kids 网站的 javascript 和 CSS：他们的菜单中似乎没有涉及 javascript（除了在滚动时删除了粘性菜单下方的徽标）。如果可能的话，我希望我的粘性菜单与他们的一样平滑（即在弹出和弹出时与 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 栏的消失和菜单的后续移动（例如，在粘性菜单演示中）非常顺利，我正在做/已经测试过它们弹出相同的网址栏。

干杯，抢

【问题讨论】：

标签： javascript css menu sticky

【解决方案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

【讨论】：

感谢您的回复。我已经尝试了上述链接中的两种方法，但它们都不起作用。我花了大约一天的时间在这里和谷歌上研究方法并尝试它们。我理解需要普通类和粘性类，但我认为普通类是绝对或相对的主要位置，然后粘性类变成了固定类。我的菜单有点粘，但是当 URL 框出现和消失时，它们并没有与 URL 框保持一致。这是我的问题，我正在尝试了解它为什么不起作用。
哦。还。当我缩小我的桌面浏览器时，固定定位效果非常好。只是 url 栏似乎使它在移动设备上上下弹出。

【解决方案2】：

我将 firebug 用于 firefox，并将以下内容添加到您的 #carttrans ID 中，我假设您只希望它坚持？如果是这样，请检查下面的 css 将您的 #carttrans 替换为以下内容，然后让我知道这是否是您想要的？

#carttrans {
    background: none repeat scroll 0 0 white;
    position: fixed;
    text-align: right;
    top: 40px;
    z-index: 999;
}

【讨论】：

再次感谢 Bryan，但这也没有用。这是一个 Youtube 视频，向您展示了我的确切问题。请注意上下弹出的菜单栏，而不是与应用程序的 URL 栏齐平。 youtu.be/OguwjZR_GdU

【解决方案3】：

您好，我查看了您的 youtube 剪辑，我发现您使用的 jquery 可能会影响顶部的主 div #carttrans 确保在此 div 上您的 css 被标记为对顶部 0px 很重要!important 让 jquery 无法更改它试试看这是否有效？

【讨论】：