Question

在词缀中我添加了一个网站名称，名称是隐藏的。向下滚动网站名称显示，并向上滚动名称将被隐藏。我使用jquery。

$(document).ready(function(){
    $(window).scroll(function(){
        if (document.body.scrollTop > 50 || >document.documentElement.scrollTop > 50) {
            $(".brand_name").removeClass("hidden");   
        } else {
            $(".brand_name").addClass("hidden");
        }
    });
});

，代码是：

<nav class="navbar navbar-default clearfix" data-spy="affix" data-    offset-top="197">
<div class="container-fluid">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>                        
  </button>
  <a class="navbar-brand brand_name hidden" href="#">WebSiteName</a>
 </div>
 <div>
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#section1">Movies</a></li>
      <li><a href="#section2">Sports</a></li>
      <li><a href="#section3">Attraction</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Events <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#section41">Section 4-1</a></li>
          <li><a href="#section42">Section 4-2</a></li>
        </ul>
      </li>
    </ul>
   </div>
 </div>
 </div>
 </nav>

在mozilla工作得很好......但是铬的问题。如何解决这个问题....请帮忙。

Answer 1

您应该使用scrollTop()代替scrollTop。

https://api.jquery.com/scrollTop/

似乎在Mozilla中接受了{p> scrollTop：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Answer 2

使用以下代码使事情有效：

HTML：

<nav class="navbar navbar-default clearfix" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>                        
  </button>
  <a class="navbar-brand brand_name" href="#">WebSiteName</a>
 </div>
 <div>
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#section1">Movies</a></li>
      <li><a href="#section2">Sports</a></li>
      <li><a href="#section3">Attraction</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Events <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#section41">Section 4-1</a></li>
          <li><a href="#section42">Section 4-2</a></li>
        </ul>
      </li>
    </ul>
   </div>
 </div>
 </div>
 </nav>    


 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, architecto eum sapiente dolorem nostrum saepe! Voluptas deserunt aperiam eligendi tempora sit incidunt similique ab. Sequi, earum qui blanditiis officiis magni?</p>

JS：

var scrollvalue=$(window).scrollTop();

$(window).on("scroll", function(){
  if($(window).scrollTop()>scrollvalue)
    {
      $(".navbar-header a").removeClass('hidden');
      scrollvalue=$(window).scrollTop();
    }
  else
    {
      $(".navbar-header a").addClass('hidden');
      scrollvalue=$(window).scrollTop();
    }
});

CSS：

.hidden{display:none;}

这是小提琴：

https://jsfiddle.net/SkyT/Lf1sr34y/1/

在chrome bootstrap词缀中添加网站名称

2 个答案: