in chrome bootstrap affixウェブサイトの名前を追加する

Question

私はウェブサイトの名前を追加します、名前は隠されています。ウェブサイトの名前を表示してスクロールし、名前をスクロールすると非表示になります。 これはjqueryを使用しています。クロムで

良い作業モジラで

<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>  

...しかし問題：

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

とコードです。 これを解決する方法をお手伝いください。

Answer 1

scrollTopの代わりにscrollTop()を使用してください。

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

scrollTop Mozillaで受け入れられているように見える：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：

を3210

CSS：

.hidden{display:none;} 

がここにフィドルです：

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