0

首先，为什么http://jsfiddle.net/s4eMT/不工作？

其次，我放入 jsfiddle 的 js 代码在我的项目中工作，但我有某种浏览器支持问题。

当我在 Chrome 中运行该网站时，它按预期工作，当您向下滚动到导航栏时，它会得到修复，当我在 Safari 和 Firefox 中运行它时，它会将导航栏设置为固定，但也会将导航栏缩小到更小并向左浮动。我不知道最后提到的浏览器不支持什么。

这是我的代码：

HTML

<div id="navbar-wrapper">
        <div class="navbar">
            <div class="navbar-inner hidden-phone">
                <ul class="nav">
                    <li @if(page=="services"){class="active"}><a href="/services">@Messages("NavServices")</a></li>
                    <li @if(page=="work"){class="active"}><a href="/work">@Messages("NavWork")</a></li>
                    <li class="logo hidden-phone"><a href="/"><img src="@routes.Assets.at("images/HF_logo_inverted.png")" class="img-circle" alt="Home" /></a></li>
                    <li @if(page=="wall"){class="active"}><a href="/wall">@Messages("NavWall")</a></li>
                    <li @if(page=="contact"){class="active"}><a href="/contact">@Messages("NavContact")</a></li>
                </ul>
            </div>
            <div class="navbar-inner visible-phone">
                <ul class="nav phone-only">
                    <li @if(page=="services"){class="active"}><a href="/services">@Messages("NavServices")</a></li>
                    <li @if(page=="work"){class="active"}><a href="/work">@Messages("NavWork")</a></li>
                </ul>
                <ul class="nav phone-only">
                    <li @if(page=="wall"){class="active"}><a href="/wall">@Messages("NavWall")</a></li>
                    <li @if(page=="contact"){class="active"}><a href="/contact">@Messages("NavContact")</a></li>
                </ul>
            </div>
           <div id="language" class="hidden-phone">
                <a href="@if(page!="index"){/@page}else{/}"><img src="@routes.Assets.at("images/gb.png")" /></a>&nbsp;&nbsp;
                <a href="#"><img src="@routes.Assets.at("images/se.png")" /></a>&nbsp;&nbsp;
             </div>
        </div>
    </div>

CSS

#navbar-wrapper {
  position: relative;
  min-width: 100%;
  border:1px solid red;
}

JAVASCRIPT

 $(document).ready(function () {
  var stickyNavTop = $('#navbar-wrapper').offset().top;

  var stickyNav = function () {
      var scrollTop = $(window).scrollTop();

      if (scrollTop > stickyNavTop) {
          $('#navbar-wrapper').css({
              'position': 'fixed',
                  'top': '0'
          });
          alert('afa');
      } else {
          $('#navbar-wrapper').css({
              'position': 'relative'
          });
      }
  };

  stickyNav();

  $(window).scroll(function () {
      stickyNav();
  });
});

我错过了什么？

问候，

4

0 回答 0