Вертикальный центр div с jQuery

Question

У меня есть вертикальное меню, которое выдается из левой части экрана при нажатии. Навигатор внутри него вертикально центрирован, давая ему верхнюю часть 50% и трансформируя translateY на -50%. Это отлично работает, когда вы открываете элемент меню, и он расширяется, чтобы показать дочерние элементы этого элемента. Все остается в центре, как должно. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу прокручивать весь путь до верхней части навигатора, если окно недостаточно высокое. По какой-то причине, если я уберу трансляцию, я могу прокрутить ее просто отлично. Поэтому моя идея состоит в том, чтобы выяснить, что верхняя часть должна быть с jQuery/JS и изменять ее каждый раз, когда нажимается элемент навигации. Но я не совсем уверен, что на самом деле делает translateY (-50%), чтобы знать, что делать в jQuery.

Вот пример моего HTML:

<div class="nav"> 
    <ul class="nav__accordion"> 
     <li class="nav__item"> 
      <div class="nav__toggle"> 
       <div class="menu-home-container"> 
        <ul id="menu-home" class="menu"> 
         <li><a href="#">Home</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </li> 
     <li class="nav__item"> 
      <div class="nav__toggle">About</div> 
      <div class="nav__content"> 
       <ul class="nav__subNav"> 
        <div class="menu-about-section-container"> 
         <ul id="menu-about-section" class="menu"> 
          <li><a href="#">Overview</a></li> 
          <li><a href="#">By the Numbers</a></li> 
          <li><a href="#">Stillwater Complex</a></li> 
          <li><a href="#">Markets</a></li> 
          <li><a href="#">Altar Porphyry</a></li> 
          <li><a href="#">Marathon-Caldwell Complex</a></li> 
          <li><a href="#">History</a></li> 
         </ul> 
        </div> 
       </ul> 
      </div> 
     </li> 
     <li class="nav__item"> 
      <div class="nav__toggle">Operations</div> 
      <div class="nav__content"> 
       <ul class="nav__subNav"> 
        <div class="menu-operations-section-container"> 
         <ul id="menu-operations-section" class="menu"> 
          <li><a href="#">Overview</a></li> 
          <li><a href="#">Mining</a></li> 
          <li><a href="#">Processing</a></li> 
          <li><a href="#">Recycling</a></li> 
          <li><a href="#">Development</a></li> 
          <li><a href="#">Mining Methods</a></li> 
         </ul> 
        </div> 
       </ul> 
      </div> 
     </li> 
     <li class="nav__item"> 
      <div class="nav__toggle">Responsibility</div> 
      <div class="nav__content"> 
       <ul class="nav__subNav"> 
        <div class="menu-responsibility-section-container"> 
         <ul id="menu-responsibility-section" class="menu"> 
          <li><a href="#">Overview</a></li> 
          <li><a href="#">Health &#038; Safety</a></li> 
          <li><a href="#">Environmental Stewardship</a></li> 
          <li><a href="#">Community</a></li> 
          <li><a href="#">Economic Sustainability</a></li> 
         </ul> 
        </div> 
       </ul> 
      </div> 
     </li> 
     <li class="nav__item"> 
      <div class="nav__toggle">People</div> 
      <div class="nav__content"> 
       <ul class="nav__subNav"> 
        <div class="menu-people-section-container"> 
         <ul id="menu-people-section" class="menu"> 
          <li><a href="#">Overview</a></li> 
          <li><a href="#">Employment</a></li> 
         </ul> 
        </div> 
       </ul> 
      </div> 
     </li> 
     <li class="nav__item"> 
      <div class="nav__toggle">Governance</div> 
      <div class="nav__content"> 
       <ul class="nav__subNav"> 
        <div class="menu-governance-section-container"> 
         <ul id="menu-governance-section" class="menu"> 
          <li><a href="#">Overview</a></li> 
          <li><a href="#">Board of Directors</a></li> 
          <li><a href="#">Management</a></li> 
          <li><a href="#">Committee Composition</a></li> 
          <li><a href="#">Governance Principals</a></li> 
          <li><a href="#">Code of Conduct</a></li> 
          <li><a href="#">By-Laws</a></li> 
          <li><a href="#">Communication with Directors</a></li> 
         </ul> 
        </div> 
       </ul> 
      </div> 
     </li> 
     <li class="nav__item"> 
      <div class="nav__toggle">Investors</div> 
      <div class="nav__content"> 
       <ul class="nav__subNav"> 
        <div class="menu-investors-section-container"> 
         <ul id="menu-investors-section" class="menu"> 
          <li><a href="#">Overview</a></li> 
          <li><a href="#">Stock Information</a></li> 
          <li><a href="#">Annual Reports</a></li> 
          <li><a href="#">Quarterly Earnings</a></li> 
          <li><a href="#">News Releases</a></li> 
          <li><a href="#">Events</a></li> 
          <li><a href="#">Presentations</a></li> 
          <li><a href="#">SEC Filings</a></li> 
          <li><a href="#">Analysts</a></li> 
          <li><a href="#">Estimates</a></li> 
          <li><a href="#">Annual Meeting</a></li> 
          <li><a href="#">Online Investor Kit</a></li> 
          <li><a href="#">Email Alerts</a></li> 
          <li><a href="#">Information Requests</a></li> 
         </ul> 
        </div> 
       </ul> 
      </div> 
     </li> 
    </ul> 
</div> 

Мой CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, /*sub, sup,*/ tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

/* apply a natural box layout model to all elements */ 
.box-size { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
} 

/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block; 
} 

body { 
    -webkit-text-size-adjust: 100%; 
    font-family: 'Lato', 'Helvetica', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    background-color: @white; 
    line-height: 24px; 
    font-size: 15px; 
    padding-bottom: 100px; 
    &.active { 
     overflow: hidden; 
    } 
} 

.navBar { 
    position: fixed; 
    background-color: #000; 
    width: 50px; 
    height: 100vh; 
    z-index: 10000; 
    left: 0; 
    border-right: 1px solid rgba(255, 255, 255, 0.1) 
} 

.navBar__closeButton { 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
    cursor: pointer; 
    width: 20px; 
    visibility: hidden; 
    opacity: 0; 
    z-index: 2; 
    -webkit-transition: all .25s 0s ease; 
    -moz-transition: all .25s 0s ease; 
    -ms-transition: all .25s 0s ease; 
    -o-transition: all .25s 0s ease 
} 

.navBar__closeButton.active { 
    visibility: visible; 
    opacity: 1; 
    -webkit-transition: all .5s .3s ease; 
    -moz-transition: all .5s .3s ease; 
    -ms-transition: all .5s .3s ease; 
    -o-transition: all .5s .3s ease; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
    cursor: pointer; 
    width: 20px; 
    z-index: 2 
} 

.navBar__burgerButton { 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
    cursor: pointer; 
    width: 30px; 
    z-index: 1; 
    opacity: 1; 
    stroke-dasharray: 100%; 
    stroke-dashoffset: 100%; 
    -webkit-animation: open .3s .1s ease-in forwards; 
    -moz-animation: open .3s .1s ease-in forwards; 
    -ms-animation: open .3s .1s ease-in forwards 
} 

.navBar__burgerButton.active { 
    stroke-dasharray: 100%; 
    stroke-dashoffset: 100%; 
    -webkit-animation: close .3s 0s ease-in forwards; 
    -moz-animation: close .3s 0s ease-in forwards; 
    -ms-animation: close .3s 0s ease-in forwards 
} 

@-moz-keyframes close { 
    0% { 
    stroke-dashoffset: 0 
    } 
    100% { 
    stroke-dashoffset: 100% 
    } 
} 

@-webkit-keyframes close { 
    0% { 
    stroke-dashoffset: 0 
    } 
    100% { 
    stroke-dashoffset: 100% 
    } 
} 

@keyframes close { 
    0% { 
    stroke-dashoffset: 0 
    } 
    100% { 
    stroke-dashoffset: 100% 
    } 
} 

@-moz-keyframes open { 
    0% { 
    stroke-dashoffset: 100% 
    } 
    100% { 
    stroke-dashoffset: 0 
    } 
} 

@-webkit-keyframes open { 
    0% { 
    stroke-dashoffset: 100% 
    } 
    100% { 
    stroke-dashoffset: 0 
    } 
} 

@keyframes open { 
    0% { 
    stroke-dashoffset: 100% 
    } 
    100% { 
    stroke-dashoffset: 0 
    } 
} 

.nav { 
    background: url('../../uploads/2015/12/global/navGradient.png'); 
    position: fixed; 
    background-color: rgba(0, 0, 0, 0.7); 
    width: 0; 
    height: 100vh; 
    z-index: 9500; 
    left: 50px; 
    overflow-x: hidden; 
    overflow-y: auto; 
    border: none 
} 

.nav.transWidth { 
    -webkit-transition: width .3s .1s ease; 
    -moz-transition: width .3s .1s ease; 
    -ms-transition: width .3s .1s ease; 
    -o-transition: width .3s .1s ease 
} 

.nav.active { 
    width: 300px 
} 

.nav__accordion { 
    height: auto; 
    margin: 0 auto; 
    position: relative; 
    display: block; 
    visibility: hidden; 
    overflow-x: hidden; 
    top: 50%; 
    opacity: 0; 
    -webkit-transition: all .3s .1s ease; 
    -moz-transition: all .3s .1s ease; 
    -ms-transition: all .3s .1s ease; 
    -o-transition: all .3s .1s ease; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%) 
} 

.nav__accordion.active { 
    visibility: visible; 
    opacity: 1; 
    -webkit-transition: all .3s .1s ease; 
    -moz-transition: all .3s .1s ease; 
    -ms-transition: all .3s .1s ease; 
    -o-transition: all .3s .1s ease 
} 

.nav__accordion a { 
    color: #fff; 
    text-decoration: none; 
    height: 100%; 
    width: 100%; 
    display: block 
} 

.nav__toggle { 
    color: #fff; 
    text-align: center; 
    height: 40px; 
    line-height: 40px; 
    text-transform: uppercase; 
    font-size: 13px; 
    letter-spacing: 1px; 
    cursor: pointer; 
    -webkit-transition: all .2s 0s ease; 
    -moz-transition: all .2s 0s ease; 
    -ms-transition: all .2s 0s ease; 
    -o-transition: all .2s 0s ease 
} 

.nav__toggle:before { 
    content: ""; 
    background-color: #c9a74c; 
    height: 40px; 
    width: 100%; 
    left: -300px; 
    position: absolute; 
    z-index: -1; 
    opacity: 0; 
    -webkit-transition: all .5s 0s ease; 
    -moz-transition: all .5s 0s ease; 
    -ms-transition: all .5s 0s ease; 
    -o-transition: all .5s 0s ease 
} 

.nav__toggle--mobile:before { 
    background-color: transparent 
} 

.nav__toggle:hover, 
.nav__toggle:hover a { 
    color: #000 
} 

.nav__toggle:hover, 
.nav__toggle--mobile:hover a { 
    color: #fff 
} 

.nav__toggle:hover:before { 
    left: 0; 
    opacity: 1; 
    -webkit-transition: all .5s 0s ease; 
    -moz-transition: all .5s 0s ease; 
    -ms-transition: all .5s 0s ease; 
    -o-transition: all .5s 0s ease 
} 

.nav__item { 
    height: 15%; 
    display: block 
} 

.nav__subNav li { 
    text-align: center; 
    color: #fff; 
    height: 35px; 
    line-height: 35px; 
    text-transform: uppercase; 
    font-size: 11px; 
    letter-spacing: 1px; 
    cursor: pointer; 
    background-color: rgba(255, 255, 255, 0.05); 
    -webkit-transition: all .2s 0s ease; 
    -moz-transition: all .2s 0s ease; 
    -ms-transition: all .2s 0s ease; 
    -o-transition: all .2s 0s ease 
} 

.nav__subNav li:hover { 
    background-color: rgba(201, 167, 76, 0.35) 
} 

.nav__subNav li.mobile:hover { 
    background-color: rgba(255, 255, 255, 0.05) 
} 

.nav__subNav li.hover { 
    background-color: rgba(201, 167, 76, 0.35) !important 
} 

.hover { 
    background-color: #c9a74c; 
    font-weight: 900 
} 

Мои JS:

var navigation = { 
    openNav: function() { 
    $('.navBar__burgerButton').click(function() { 
     $('.nav, .pageDim, .pageWrap, .nav__accordion, .closeAll, body').addClass('active'); 
     $(this).attr('class', 'navBar__burgerButton active'); 
     $('.navBar__closeButton').attr('class', 'navBar__closeButton active'); 

     if ($('.nav').hasClass('active')) { 
     $('.pageWrap').addClass('slidePageRight'); 
     } 

     if (windowWidth <= 1080) { 
     $('body').css({ 
      'overflow': 'hidden' 
     }) 
     } 
    }); 
    }, 

    closeNav: function() { 
    $('.navBar__closeButton').click(function() { 
     closeNav(); 
    }); 
    var closeNav = function() { 
     $('.nav, .pageDim, .pageWrap, .nav__accordion, .closeAll, body').removeClass('active'); 
     $('.navBar__burgerButton').attr('class', 'navBar__burgerButton'); 
     $('.navBar__closeButton').attr('class', 'navBar__closeButton'); 
     $('.navScrollBug').removeClass('active'); 
     // Slides back to normal 
     if (!$('.nav').hasClass('active')) { 
     $('.pageWrap').removeClass('slidePageRight'); 
     } 

     if (windowWidth <= 1080) { 
     $('body').css({ 
      'overflow': '' 
     }) 
     } 
    } 
    $('.closeAll').click(function() { 
     closeNav(); 
    }); 
    }, 

    showScrollBug: function() { 
    var wH = $(window).height(); 
    var nI = $('.nav__item').length; 
    var i = (nI * 50) + 81; 

    $('.navBar__burgerButton').on('click', function() { 
     if ($('.nav__toggle').hasClass('hover')) { 
     var c = $('.nav__toggle.hover').next().find('.nav__subNav').height(); 
     var navH = i + c; 
     if (navH > wH) { 
      $('.navScrollBug').addClass('active'); 
     } else { 
      $('.navScrollBug').removeClass('active'); 
     } 
     } 
    }); 

    $('.nav__item').on('click', function() { 
     $(this).toggleClass('open'); 

     var c = $(this).find('.nav__subNav').height(); 

     if ($(this).hasClass('open')) { 
     var navH = i + c; 
     $('.nav__item').not(this).removeClass('open'); 
     if (navH > wH) { 
      $('.navScrollBug').addClass('active'); 
     } else { 
      $('.navScrollBug').removeClass('active'); 
     } 
     } else if (!$(this).hasClass('open')) { 
     $('.navScrollBug').removeClass('active'); 
     } 
    }); 
    }, 

    accordion: { 
    dropDown: function() { 
     // Hides content on nav open 
     $('.nav__content').slideUp('fast'); 
     // Navigation Accordion 
     $('.nav__accordion').find('.nav__toggle').click(function() { 
     //Expand or collapse this panel 
     $('.nav__content').removeClass('active'); 
     $('.nav__accordion > li').removeClass('hover'); 
     $(this).next().slideToggle('fast'); 
     //Hide the other panels 
     $(".nav__content").not($(this).next()).slideUp('fast'); 
     }); 
    }, 

    statusIndicator: function() { 
     var pathName = window.location.pathname; 
     var pathArray = pathName.split('/'); 
     var arrayLength = pathArray.length; 
     var l = pathArray[arrayLength - 2]; 

     $('.nav__accordion a').each(function() { 
     var n = $(this).attr('href'); 
     var nn = $(this).html(); 
     var sb = $('.sideBar a.active').html(); // Gets active state of investors sidebar nav 

     var hrefArray = n.split("/"); 
     var hrefArrayLength = hrefArray.length; 
     var nl = hrefArray[hrefArrayLength - 2]; 

     if (nl === l || nn === sb) { 
      $(this).closest('li').addClass('hover'); 
      $(this).closest('.nav__content').siblings('.nav__toggle').addClass('hover'); 
      $(this).closest('.nav__content').siblings('.nav__toggle').closest('.nav__item').addClass('open'); 
      $(this).closest('.nav__content').slideDown(); 
     } 
     }); 
    }, 

    keepHighlight: function() { 
     // Holds hover state on click for Navigation Accordion 
     $(".nav__toggle").click(function() { 
     $(".nav__toggle").removeClass('hover'); 
     $(this).addClass('hover'); 
     }); 
    } 
    }, 

    interiorStickyNav: function() { 
    // Interior Page NavPager Controls StickyNav 
    var stickyNav = $(".stickyNav"); 
    var pathName = window.location.pathname; 
    var pathArray = pathName.split('/'); 
    var arrayLength = pathArray.length; 
    var href = pathArray[arrayLength - 2]; 

    if (href == "by-the-numbers") { 
     stickyNav.addClass("sticky"); 
    } else { 
     $(window).scroll(function() { 
     if ($(window).scrollTop() > 250) { 
      stickyNav.addClass("sticky"); 
     } else { 
      stickyNav.removeClass("sticky"); 
     } 
     }); 
    } 
    }, 
}; 
navigation.openNav(); 
navigation.closeNav(); 
navigation.showScrollBug(); 
navigation.accordion.dropDown(); 
navigation.accordion.statusIndicator(); 
navigation.accordion.keepHighlight(); 
navigation.interiorStickyNav(); 

Вот мой jsfiddle: https://jsfiddle.net/Lfud2nk4/

Answer 1

Я думаю, вы должны использовать приведенную ниже функцию JQuery, чтобы решить вашу проблему: дать поле идентификатора для каждого «nav__toggle» ДИВ и использовать этот запрос:

$(document).ready(function(){ 
    $("#<your id name in nav__toggle>").click(function(){ 
     $("#menu-investors-section").slideToggle("slow"); 
    }); 
}); 

Надеюсь, это то, что вы ищете. Исправьте меня, если я ошибаюсь.