в хром бутстрап аффикс добавить название сайта

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/

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:

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/