javascript - div的垂直定位是错误的

标签 javascript html css

我正在尝试制作作品集，这是没有内容的相同代码:

$(document).ready(function() {
  $('.nav-link').on('click', function() {
    if ($(window).width() < 768) {
      let section = $(".section#" + $(this).attr('id')).offset();
      let scrollTop = $('#main-container').scrollTop() + section.top
      $('#main-container').animate({
        scrollTop: scrollTop
      }, 500);
    } else {
      let section = $(".section#" + $(this).attr('id')).offset();
      let scrollLeft = $('#main-container').scrollLeft() + section.left
      console.log(scrollLeft);
      $('#main-container').animate({
        scrollLeft: scrollLeft
      }, 500);
    }
  });



  $(".container").scroll(function() {
    if ($(window).width() < 768) {
      let container = $(".container");
      let container_height = container.height();
      let pageSplit = 1 / $('.section').length

      let profile_height = container_height * pageSplit;
      let projects_height = container_height * pageSplit * 2;
      let contact_height = container_height * pageSplit * 3;
      if ($('.container').scrollTop() > contact_height + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#contact').addClass('active');
      } else if ($('.container').scrollTop() > profile_height && $('.container').scrollTop() < contact_height + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#projects').addClass('active');
      } else if ($('.container').scrollTop() < profile_height) {
        $('.nav-link').removeClass('active');
        $('.nav-link#profile').addClass('active');
      }
    } else {
      let container = $(".container");
      let container_width = container.width();
      let pageSplit = 1 / $('.section').length

      let profile_width = container_width * pageSplit;
      let projects_width = container_width * pageSplit * 2;
      let contact_width = container_width * pageSplit * 3;

      console.log($('.container').scrollLeft());
      console.log(projects_width);

      if ($('.container').scrollLeft() > contact_width + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#contact').addClass('active');
      } else if ($('.container').scrollLeft() > profile_width && $('.container').scrollLeft() < contact_width + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#projects').addClass('active');
      } else if ($('.container').scrollLeft() < profile_width) {
        $('.nav-link').removeClass('active');
        $('.nav-link#profile').addClass('active');

      }
    }
  });
});

function scrollHorizontally(e) {
  e = window.event || e;
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  document.getElementById('main-container').scrollLeft -= (delta * 55); // Multiplied by 40
  e.preventDefault();
}

if (document.documentElement.clientWidth >= 768) {
  if (document.getElementById('main-container').addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.getElementById('main-container').addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    document.getElementById('main-container').addEventListener("DOMMouseScroll", scrollHorizontally, false);
  } else {
    // IE 6/7/8
    document.getElementById('main-container').attachEvent("onmousewheel", scrollHorizontally);
  }
}

function scroll() {
  if (document.documentElement.clientWidth >= 768) {
    if (document.getElementById('main-container').addEventListener) {
      // IE9, Chrome, Safari, Opera
      document.getElementById('main-container').addEventListener("mousewheel", scrollHorizontally, false);
      // Firefox
      document.getElementById('main-container').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
      // IE 6/7/8
      document.getElementById('main-container').attachEvent("onmousewheel", scrollHorizontally);
    }
  } else {
    if (document.getElementById('main-container').removeEventListener) {
      // IE9, Chrome, Safari, Opera
      document.getElementById('main-container').removeEventListener("mousewheel", scrollHorizontally, false);
      // Firefox
      document.getElementById('main-container').removeEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
      // IE 6/7/8
      document.getElementById('main-container').detachEvent("onmousewheel", scrollHorizontally);
    }
  }
}
/* For mobile phones: */

.container {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #BEBAB7;
  overflow: auto;
  scrollbar-width: none;
  white-space: normal;
}

* {
  margin: 0;
}

html,
body {
  background-color: #BEBAB7;
  height: 100%;
  font-family: sans-serif;
  color: #77212E;
}

.container::-webkit-scrollbar {
  display: none;
}

div.section {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.body {
  margin-top: 25%;
  margin-left: 25%;
  width: 40%;
  white-space: normal;
}

.section-pic {
  width: 100px;
  height: 100px;
  margin-bottom: 25px;
  border-radius: 100px;
  border: 2px solid #77212E;
}

hr {
  border-color: #77212E;
}

.github-logo {
  width: 100px;
}

.nav {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1000;
}

.nav-link {
  margin: 5px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #77212E;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.nav-link.active::after {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .container {
    white-space: nowrap;
    height: auto;
    min-height: 100vh;
  }
  .body {
    position: relative;
    top: 50%;
    margin: auto;
  }
  .section {
    margin-top: 0;
    height: 100vh;
  }
  .nav {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
  }
  .nav-link {
    float: left;
    margin: 5px;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/nav.css">
</head>

<body onresize="scroll()">
  <div class="nav">
    <div class="nav-link active" id="profile">
      Profile
    </div>
    <div class="nav-link" id="projects">
      Projects
    </div>
    <div class="nav-link" id="contact">
      Contact
    </div>
  </div>

  <div class="container" id="main-container">
    <div class="section" id="profile">
      <div class="body">
        <h1 class="heading" id="profile-heading"><img src="img/content/profile-pic.jpg" alt="Profile Pic" class="section-pic" align="middle"> Profile</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel euismod lorem, in condimentum leo. Nam a magna convallis, finibus odio at, tincidunt mi. Donec non erat varius, pulvinar sapien at, rhoncus lectus.
      </div>
    </div>
    <div class="section" id="projects">
      <div class="body">
        <h1 class="heading" id="profile-heading"><img src="img/content/projects-pic.jpg" alt="Projects Pic" class="section-pic" align="middle"> Projects</h1>
        orem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel euismod lorem, in condimentum leo. Nam a magna convallis, finibus odio at, tincidunt mi. Donec non erat varius, pulvinar sapien at, rhoncus lectus. Vivamus accumsan quam at arcu accumsan
        blandit. Aliquam quis dignissim sapien, a ullamcorper risus. Phasellus accumsan neque ligula, a dapibus neque vulputate at.
      </div>
    </div>
    <div class="section" id="contact">
      <div class="body">
        <h1 class="heading" id="profile-heading"><img src="img/content/contact-pic.jpg" alt="Contact Pic" class="section-pic" align="middle"> Contact</h1>
        <form action="">
          <input type="email">
          <input type="text">
          <textarea></textarea>
        </form>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/main.js" defer></script>
  <script type="text/javascript" src="js/scroll.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

如果你扩大和缩小结果窗口，你可以看到页面从水平布局变为垂直布局(你必须在更改布局时单击运行才能使滚动起作用，我知道为什么它不起作用在 jsfiddle 中正确)。如您所见，如果您在水平布局时滚动，页面的每个“部分”都有不同的垂直定位。如何使垂直定位位于每个部分的页面顶部？

最佳答案

(这里是问题代码的 fiddle :http://jsfiddle.net/6902zwjg/1/)

您已将 display: inline-block; 分配给您的部分。这会导致您的部分在底部对齐。如果你想垂直居中，你可以使用 flex。

示例:https://codepen.io/anon/pen/zQbMzR

  • float 元素默认在顶部对齐。
  • 内联和内联 block 元素默认在底部对齐。
  • 对于垂直对齐，您可以使用 flex。

关于javascript - div的垂直定位是错误的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56444225/

上一篇：c# - 为什么在构建我的元素后一切正常，但刷新后更改消失了？

下一篇：javascript - 如何在超时期间更改多个元素的 css？ (多个进度条)

相关文章：

html - 动态中心 div Bootstrap

javascript - 下面这段代码中括号的作用是什么？

javascript - 如何从点击 javascript 中的一行中排除 <a> 标签？

javascript - 视差在具体化 css 中不起作用

html - 可滚动表在 IE8 中有额外的不需要的空间

javascript - 使用 reveal.js，如何在完成嵌入式媒体后更改幻灯片？

javascript - 页面将#link 添加到元素错误

javascript - javascript 的第二位，用于更改前一个 javascript block 中的设置

javascript - 这个额外的名称/值对来自哪里？

css - 屏幕分辨率更改 CSS

©2024 IT工具网  联系我们