Несколько классов в одном div

Question

Это было весь день в моей голове, и, прежде чем я сдался, я подумал, что увижу, сможет ли кто-нибудь помочь мне.

У меня есть липкий заголовок, который перемещается вниз по странице при прокрутке. Я использую bootstrap и имею два класса в одном div - navbar для обычного вида и navbarSticky для липкого эффекта при прокрутке.

Проблема заключается в том, когда у меня есть оба класса в DIV, то navbar класс полностью исчезает, но navbarSticky работ и navbar вернется только тогда, когда navbarSticky класс удаляется из дел. Я думал, что это должно иметь какое-то отношение к CSS - navbarSticky, имеющее больше приоритета над navbar.

Я был бы очень признателен, если бы кто-то мог мне помочь.

Это мой Navbar:

<div class="navbar navbarSticky navbar-inverse navbar-static-top" role="navigation"> 
    <div class="container"> 
     <div class="row"> 
      <div class="logo col-xs-6 col-md-6"> 
       <ul class="pull-left"> 
        <li><a href="">Theme</a></li> 
       </ul> 
      </div> 
      <div class="nav col-xs-6 col-md-6"> 
       <ul class="pull-right"> 
        <li><a href="">Home</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products</a> 
         <ul> 
          <li><a href="">Example Dropdown</a></li> 
          <li><a href="">Example Dropdown</a></li> 
          <li><a href="">Example Dropdown</a></li> 
          <li><a href="">Example Dropdown</a></li> 
         </ul> 
        </li> 
        <li><a href="">Services</a></li> 
        <li><a href="">Join</a></li> 
        <li><a href="">About</a></li> 
        <li><a href="">Contact</a></li> 
       </ul> 
      </div> 
      <div class="menu-button col-xs-6 col-md-6"> 
       <ul class="pull-right"> 
        <li> 
         <button id="menu-button" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div id="nav-dropdown" class="nav-dropdown col-xs-12 col-md-12"> 
     <ul> 
      <li id="form"> 
       <form class="navbar-form navbar-left" role="search"> 
        <div class="form-group"> 
         <input type="text" class="form-control" placeholder="Search"> 
        </div> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </form> 
      </li> 
      <li><a href="">Home</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products</a> 
       <ul> 
        <li><a href="">Example Dropdown</a></li> 
        <li><a href="">Example Dropdown</a></li> 
        <li><a href="">Example Dropdown</a></li> 
        <li><a href="">Example Dropdown</a></li> 
       </ul> 
      </li> 
      <li><a href="">Services</a></li> 
      <li><a href="">Join</a></li> 
      <li><a href="">About</a></li> 
      <li><a href="">Contact</a></li> 
     </ul> 
    </div> 
</div> 

Это мой JQuery

$(window).scroll(function(){ 

if($(window).scrollTop() > 65) 
{ 
    $("navbar").addClass('navbarSticky'); 
    $(".navbarSticky").css({ 
     'display':'block' 
    }) 
} 
else{ 
    $("navbar").removeClass('navbarSticky'); 
    $(".navbarSticky").css({ 
     display:'none' 
    }) 
} 
}); 

Это мой CSS

.navbar 
{ 
background: #ffffff; 
color: #2d3238; 
position: relative; 
-webkit-transition: all 1s; 
-moz-transition: all 1s; 
-ms-transition: all 1s; 
-o-transition: all 1s; 
transition: all 1s; 
height: 100px; 
} 
.navbarSticky 
{ 
background: #ffffff; 
box-shadow: 1px 5px 15px #ccc; 
color: #2d3238; 
display: none; 
top: 0; 
height: 100px; 
left: 0; 
right: 0; 
position: fixed; 
-webkit-transition: all 1s; 
-moz-transition: all 1s; 
-ms-transition: all 1s; 
-o-transition: all 1s; 
transition: all 1s; 
z-index: 9999; 
} 

Update:

Я, наконец, он работает, я просто нуждался в чанг e navbar в jquery для .navbar, но теперь у меня есть некоторый wierd, сбрасывающий эффект navbarSticky, когда он пересекает навигационную панель. Может ли кто-нибудь помочь?

Answer 1

navbarSticky перезаписывает каждое имущество на navbar. Дело не в том, что класс navbar исчезает, это значит, что ни одна из его собственных свойств css не доминирует, поэтому вы не видите ничего, пока не будет удален класс navbarSticky.