安卓浏览器固定菜单弹出和弹出，网址消失

Android Chrome fixed menu popping in and out with url disappearing

本文关键字：消失 菜单 浏览器      更新时间：2023-09-26

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

在我的网站上 黑星蛋白石 我一直在尝试实现一个粘性菜单，就像这个 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 栏的消失和菜单的后续移动（例如，在粘性菜单演示中）非常流畅，我正在/已经使用相同的 url 栏弹出测试它们。

干杯抢

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 粘性标头

我为火狐使用了火虫，只是将以下内容添加到您的 #carttrans ID 中，我假设你只希望它坚持下去？如果是这样，请检查下面的 css 将您的 #carttrans 替换为以下内容，然后知道这是否是您想要的？

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

了你的 youtube 剪辑，我发现可能是你正在使用的 jquery 影响了你顶部的主div #carttrans 确保在这个div 上你的 CSS 被标记为对前 0px 很重要！重要，这样 jquery 就无法更改它试试看这是否有效？

相关文章：