Как сделать закрытие и открытие сайт бара?

189

15 августа 2018, 11:40

не могу сделать что бы, при скролле по странице, определялся пункт под меню, и предыдущий закрылся например. а след открылся. не совсем понятно. Вот тут есть пример бокового меню - Ссылка

у меня пока вышло лишь, настроить добавления класса актив, закрытие и открытие но не автоматизировано.

вот код.

HTML-

<ul class="menu card card-body" id="menuprod">
    <li id="tabs"><span class="pp" id="tabs-1">Арматура, катанка</span>
        <ul class="internal armatura" id="armatura">
            <li><a href="#armatura_a1">Арматура А1, круг</a></li>
            <li><a href="#armatura_a3">Арматура А3</a></li>
            <li><a href="#katanka">Катанка</a></li>
            <li><a href="#kvadrat">Квадрат</a></li>
        </ul>
    </li>
    <li><span class="pp" id="tabs-2">Трубы</span>
        <ul class="internal trubi" id="trubi">
            <li><a href="#prof_trubi">Профильные трубы</a></li>
            <li><a href="#vgp_trubi_electro">ВГП трубы, э/с</a></li>
            <li><a href="#bez_shov_vgp_trubi">Бесшовные ВГП трубы</a></li>
            <li><a href="#nerj_trubi">Нержавеющие трубы</a></li>
        </ul>
    </li>
    <li><span class="pp" id="tabs-3">Листовой прокат</span>
        <ul class="internal list" id="list">
            <li><a href="#list_hk">Лист х/к</a></li>
            <li><a href="#list_gk">Лист г/к</a></li>
            <li><a href="#steel">Сталь</a></li>
            <li><a href="#profnastil">Профнастил</a></li>
        </ul>
    </li>
    <li><a href="#ugolok">Уголок</a></li>
    <li><a href="#shveller">Швеллер</a></li>
    <li><a href="#metalloconstruction">Металлоконструкции</a></li>
</ul>

JavaScript -

jQuery(function($) {
  function fixDiv() {
    var $cache = $('#menuprod');
    if ($(window).scrollTop() > 340)
      $cache.css({
        'position': 'fixed',
        'top': '7%'
      });
    else
      $cache.css({
        'position': 'relative',
        'top': '0',
      });
  }
  $(window).scroll(fixDiv);
  fixDiv();
});
$(function() {
  $('.menu > li').click(function() {
    $(this).find("ul").slideToggle();
    $(this).find('span').toggleClass('red');
  });
  $("li a").click(function(e) {
      e.stopPropagation();
   });
});
$(function () {
// Cache selectors
    var lastId,
        topMenu = $("#menuprod"), //  id меню
        //topMenuHeight = topMenu.outerHeight()+15,
        topMenuHeight = 0,
        // All list items
        menuItems = topMenu.find("a"),
        // Anchors corresponding to menu items
        scrollItems = menuItems.map(function () {
            var item = $($(this).attr("href"));
            if (item.length) {
                return item;
            }
        });
// Bind click handler to menu items
// so we can get a fancy scroll animation
    menuItems.click(function (e) {
        var href = $(this).attr("href"),
            offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
        $('html, body').stop().animate({
            scrollTop: offsetTop
        }, 1000);
        e.preventDefault();
    });
// Bind to scroll
    $(window).scroll(function () {
        // Get container scroll position
        var fromTop = $(this).scrollTop();
        // Get id of current scroll item
        var cur = scrollItems.map(function () {
            if ($(this).offset().top < fromTop)
                return this;
        });
        //alert('1' + fromTop);
        // Get the id of the current element
        cur = cur[cur.length - 1];
        var id = cur && cur.length ? cur[0].id : "";
        if (lastId !== id) {
            lastId = id;
            // Set/remove active class
            menuItems
                .parent().removeClass("active_prod")
                .end().filter("[href='#" + id + "']").parent().addClass("active_prod");
        }
        if(fromTop == 0){
            menuItems.first().parent().addClass("active_prod");
        }
    });
});