javascript - 使用 jQuery 垂直居中 div

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”div 提供一个 id 字段并使用此查询:

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

希望这就是您要找的。 如果我错了，请纠正我。