Question

我对网络开发世界相对较新，并采用了bootstrap＆amp; amp; jquery建立一个响应式网站。我的网站在除iOS之外的所有设备上运行良好。包含徽标和导航菜单的标题是出现问题的地方。过渡动画非常慢，几乎到了不工作的地步（在iOS上的safari和Chrome中都是如此）。并且引导网格布局也不能很好地工作。我的徽标列太大，无法根据网格大小调整大小。这是标题的代码：

HTML：

<header id="mainHead">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-lg-4 text-left">
                    <img class="mainLogo" src="img/logos/logo.png" alt="logo" />
                </div>
                <div class="col-sm-12 col-md-8 col-lg-8">
                    <ul class="listOptions navigationList text-right">
                        <li class="listEntryOptions">ABOUT</li>
                        <li class="listEntryOptions"><a href="#menu">MENU</a></li>
                        <li class="listEntryOptions"><a href="#reservations">RESERVATIONS</a></li>
                        <li class="listEntryOptions"><a href="#contact">CONTACT</a></li>
                    </ul>
                </div>
            </div>
        </div>        
    </header>

jQuery（用于标题调整大小动画效果）：

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


   });

CSS：

#mainHead {
  position: fixed;
  z-index: 200;
  width: 100%;
  top: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
  background-color: #FFFFFF; 
  box-shadow: 5px 5px 5px #888888;
  margin-bottom: 20px;
}

.mainLogo {
  margin: 0 auto;
  height: 20%;
  width: auto;
      transition: all 1s ease;
}

.sticky {
  margin: 0 auto;
  height: 10%;
  width: auto;
  transition: all 1s ease;

}

为iOS设备解决这些问题的最佳方法是什么？我有什么不正确的事吗？会喜欢任何反馈。感谢

Answer 1

我的第一个倾向是调整滚动功能 - 它会反复触发 - 就像每次窗口移动一样，并一遍又一遍地添加sticky类。

请参阅此演示：Fiddle

打开控制台，查看日志，演示如何重复触发该功能。除此之外，我无法真正告诉小提琴的动画......

（编辑添加 - 我添加了可怕的css3填充只是为了给出该区域滚动的可视指示符。）

Bootstrap标题网格布局＆amp;使用jquery的CSS转换在iPad和iPad上运行不佳iPhone手机

1 个答案: