簡體   English   中英

ScrollTop Javascript在Firefox中不起作用

[英]ScrollTop Javascript is not working in Firefox

我的導航欄無法與ScrollTop Javascript一起正常工作。 它適用於Chrome和Safari,但不適用於Firefox。

這是我目前在網站上擁有的所有代碼。 一旦導航欄位於頁面頂部,我希望導航欄跟隨滾動。 請在Firefox中查看,因為這是我遇到的問題!

HTML

<body>

  <div class="container">
    <nav class="bottom" id="nav">
      <div class="buttonWrapper">
        <a href="#about">
          <div class="navButton">About</div>
        </a>
        <a href="#designs">
          <div class="navButton">Designs</div>
        </a>
        <a href="#contact">
          <div class="navButton">Contact</div>
        </a>
      </div>
    </nav>
    <div class="largeLogo"></div>
  </div>
  <div class="container about" id="about">
    <div class="sideBar about">
      <div class="sidebarText"></div>
      <p></p>
    </div>
  </div>

  <div class="container designs" id="designs">
    <div class="view view-ninth">
      <img src="images/11.jpg" />
      <div class="mask mask-1"></div>
      <div class="mask mask-2"></div>
      <div class="content">
        <h2>Hover Style #9</h2>
        <p>Some Text</p>
        <a href="#" class="info">Read More</a>
      </div>
    </div>
    <div class="sideBar designs">
      <div class="sidebarText"></div>
    </div>
  </div>

  <div class="container contact" id="contact">
    <div class="sideBar contact">
      <div class="sidebarText"></div>
    </div>
  </div>

</body>

的JavaScript

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

window.addEventListener("scroll", navTop, false);

function navTop() {
  var nav = document.getElementById("nav");
  var about = document.getElementById("about").offsetTop - 1;
  if (document.body.scrollTop > about) {
    nav.className = "minimize";
  } else {
    nav.className = "bottom";
  }
}

小提琴

問題出在document.body.scrollTop 嘗試使用以下代碼:

function navTop() {
  var nav = document.getElementById("nav");
  var about = document.getElementById("about").offsetTop - 1;
  var scrollTop = $(document).scrollTop();
  if (scrollTop > about) {
    nav.className = "minimize";
  } else {
    nav.className = "bottom";
  }
}

$(document).scrollTop(); / $(window).scrollTop(); 適用於Firefox和Chrome

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM