С переменной Open

by PlayboyZP

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  

<body>
  
  <div id="blue_menu" class="mob-acc-place default komp full-size">    
    
    <div class="mob-acc-header full-size">Каталог</div>        
    
    <div class="mob-acc-content acc-place full-size">
        <div class="acc-header btn1">Категория 1</div>
        <div class="acc-content"> 
            <div class="btn2">Подкатегория 1.1</div>
            <div class="btn2">Подкатегория 1.2</div>
            <div class="btn2">Подкатегория 1.3</div>
            <div class="btn2">Подкатегория 1.4</div>
        </div>

        <div class="acc-header btn1">Категория 2</div>
        <div class="acc-content"> 
            <div class="btn2">Подкатегория 2.1</div>
            <div class="btn2">Подкатегория 2.2</div>
            <div class="btn2">Подкатегория 2.3</div>
            <div class="btn2">Подкатегория 2.4</div>
        </div>

        <div class="acc-header btn1">Категория 3</div>
        <div class="acc-content"> 
            <div class="btn2">Подкатегория 3.1</div>
            <div class="btn2">Подкатегория 3.2</div>
            <div class="btn2">Подкатегория 3.3</div>
            <div class="btn2">Подкатегория 3.4</div>
        </div>
    </div>      
                   
  </div>   

  <div id="content" class="full-size">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed purus aliquet, congue nisi ac, mollis tellus. Cras id ultrices orci. In hac habitasse platea dictumst. Donec urna lorem, tincidunt at vestibulum vel, aliquet tempor dolor. Proin dolor arcu, vestibulum et magna ut, rutrum tincidunt orci. Duis suscipit est ut magna faucibus venenatis. Etiam posuere dui lobortis pulvinar rutrum.
      </p>
      <h2>Крутим вниз</h2>
      <p>
      Mauris lorem erat, fermentum et eleifend in, faucibus consectetur mi. Vestibulum sed ligula a nisi suscipit maximus et ut felis....

CSS

#blue_menu {
    background-color: #02ACC3;
    color: white;
    font-size: 22px;
    position: relative;
}
.full-size {
    width: 100%;
    float: left;
    clear: both;
}

.mob-acc-header, .acc-header {
    cursor: pointer;
}
.mob-acc-header {   /*Кнопка Каталог*/ 
    cursor: pointer;
    position: absolute;
    display: none;
    font-weight: bold;
    font-size: 24px;
}
#blue_menu.default.komp .mob-acc-content { /*1-й уровень меню*/    
    display: block !important;
}

.btn1, .btn2 {
    float: left;
    text-align: center;
    padding: 0.2em 0;    
}    
.btn1 {    /*Кнопка меню 1-го уровня*/
    width: 33.33%;    
    background-color: #02ACC3;
}
.btn2 {    /*Кнопка меню 2-го уровня*/
    width: 25%;
    font-size: 18px;
    background-color: #189429;
}
.btn1.ui-state-active {
    background-color: #189429;
}
.acc-content { /*2-й уровень меню*/    
    position: absolute;
    top: 36px;    
    background-color: #189429;    
    width: 100%;
}


#blue_menu.fixed {
    position: fixed;
    top: 0;
    left: 0;   
    height: 32px;    
}

.fixed .mob-acc-header {
    display: block;
}

#blue_menu.fixed .mob-acc-content {   
    position: absolute;
    top: 33px;    
}

#blue_menu.fixed .btn1 {
    width: 125px;
    clear: left;        
    text-align: left;
}

#blue_menu.fixed .acc-content {
    top: 0;
    width: 190px;
    left: 125px;
}

#blue_menu.fixed .btn2 {    
    clear: left;
    width: 100%;
}

JavaScript

(function($){
  $(function(){
    /*Кнопка каталог (когда меню свернуто) */
    $( ".mob-acc-place" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        header: ".mob-acc-header"
    });
   var open;
   /*Категория1, Категория2, Категория3*/
   $( ".acc-place" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        header: ".acc-header",
        activate:  function(event, ui){ open = ui.newPanel.length;
 
   }
    });
 
 
    var $menu = $("#blue_menu");
    /*Классы голубого меню: ... */
 
    /*...1) первоначальные -  при загрузке сайта*/
    if ( $(this).scrollTop() > 43 && $menu.hasClass("default") ){
      $menu.removeClass("default").addClass("fixed");
 
 
 
    } else if($(this).scrollTop() <= 43 && $menu.hasClass("fixed")) {
        $menu.removeClass("fixed").addClass("default");
    }
 
 
    /*...2) при скроле*/
    $(window).scroll(function(){
      if ( $(this).scrollTop() > 43 && $menu.hasClass("default") ){
          $menu.removeClass("default").addClass("fixed");
          if(open) $menu.accordion( "option", "active",  0 );
      } else if($(this).scrollTop() <= 43 && $menu.hasClass("fixed")) {
          $menu.removeClass("fixed").addClass("default");
      }
 
    });
 
 
  });
 
})(jQuery);