javascript - body 需要在视差图像前面

我有两个问题。

我有一个视差图像问题，内容包装器没有覆盖图像。
我有一个 js 函数，如果您滚动到某个点，文本就会淡入，自从我开始使用视差后，它就不再起作用了。

如果有人能提供帮助，我将不胜感激..!!

$(document).ready(function() {
  //Smooth scrolling - - - - - - - - - - - -    
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();
      // Store hash
      var hash = this.hash;
      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top - 500
      }, 800, function() {
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });


  /*
    parallax background - - - - - - - - -
	var movementStrength = 25;
	var height = movementStrength / $(window).height();
	var width = movementStrength / $(window).width();
	$(".header").mousemove(function(e) {
		var pageX = e.pageX - ($(window).width() / 2);
		var pageY = e.pageY - ($(window).height() / 2);
		var newvalueX = width * pageX * -1 - 25;
		var newvalueY = height * pageY * -1 - 50;
		$('.header').css("background-position", newvalueX + "px     " + newvalueY + "px");
	});
	*/

  //Navbar - - - - - - - - - - - - - - - 
  var menuItemsContainer = $(".js-fadeIn-right")
  var menuItems = menuItemsContainer.find('li')
  var length = menuItems.length
  for (var i = 0; i < length; i++) {
    (function() {
      var j = i;
      var delay = 200 * (j + 1)
      setTimeout(function() {
        $(menuItems[j]).addClass('fadeIn-right')
      }, delay)
    }())
  }
})
var fadeInScroll = (function(win, doc) {
  var sections = [];
  var elSections;
  var settings = {
    fadeInOffset: 100 // How far into the page it should be, before fading in
  }

  var sel = {
    section: '.js-section',
    header: '.js-header',
    copy: '.js-copy'
  };

  var activeClass = 'is-active';
  var events = {
    scroll: 'scroll'
  }

  init();

  function init() {
    getSectionFromTopofPage();
    bindEvents()
  }

  function getSectionFromTopofPage() {
    elSections = doc.querySelectorAll(sel.section);
    var lenSections = elSections.length;
    for (var i = 0; i < lenSections; i++) {
      sections.push({
        offset: elSections[i].offsetTop,
        element: elSections[i]
      });
    }
  }

  function getWindowHeight() {
    return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  }

  function bindEvents() {
    var windowHeight = getWindowHeight();
    window.addEventListener(events.scroll, function(e) {
      for (var i = 0; i < sections.length; i++) {
        if ((window.pageYOffset + windowHeight - settings.fadeInOffset) > sections[i].offset) {
          var headerEl = sections[i].element.querySelector(sel.header);
          var copyEl = sections[i].element.querySelector(sel.copy);
          headerEl.classList.add(activeClass);
          copyEl.classList.add(activeClass);
        }
      }
    })
  }
})(window, window.document);

/*----- IMPORT -----*/

@import url(/css/keyframes.css);
@import url(/css/navbar.css);
@import url(/css/footer.css);
@import url(/css/header.css);
@import url(/css/buttons.css);

/*----- IMPORT -----*/

a {
  color: orange;
  text-decoration-line: none;
  font-size: 20px;
  transition: color 0.1 ease;
}

a:hover {
  color: black;
  text-decoration-line: none;
}

.content-wrapper a {
  color: orange;
  text-decoration-line: none;
  transition: color 1s ease;
  font-size: 16px;
}

w .content-wrapper a:hover {
  color: black;
  text-decoration-line: none;
}

.image {
  border-radius: 49%;
  float: right;
  z-index: 98;
  max-width: 100%;
}

html {
  margin: 0;
  padding: 0;
}

body {
  background-color: #F1F1F1;
  margin: 0;
  padding 0;
  font-family: 'Merriweather', serif;
  display: block;
}

.intro1 {
  font-weight: bold;
  margin-bottom: 10px;
}

.intro2 {
  font-weight: bold;
  margin-top: 10px;
}

p {
  margin-top 0px;
  margin-bottom: 50px;
  color: #666666;
  margin-right: 10px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 0px;
}

#container {
  max-width: 1200px;
  width: 100%;
  min-height: 1000px;
  background-color: white;
  margin: 80px auto;
  margin-top: 0px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 10px;
}

.content-wrapper {
  padding: 8%;
  padding-top: 20px;
  line-height: 2;
  font-family: 'Roboto', sans-serif;
}

h3 {
  font-family: 'Anton', sans-serif;
  letter-spacing: 5px;
  font-size: 30px;
  padding-bottom: 0px;
  margin: 0 0px;
}

.footer {
  color: #87848D;
  text-align: center;
  padding-bottom: 5px;
}

.info-block {
  transition: all 1.5s ease;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
}

s .info-block .js-header {
  width: 50%;
  opacity: 0;
  transition: all 2.5s ease;
  -webkit-transform: translate3d(-100px, 0, 0);
  -moz-transform: translate3d(-100px, 0, 0);
  -ms-transform: translate3d(-100px, 0, 0);
  -o-transform: translate3d(-100px, 0, 0);
  transform: translate3d(-100px, 0, 0);
}

.info-block .js-copy {
  opacity: 0;
  transition: all 2.5s ease;
  -webkit-transform: translate3d(100px, 0, 0);
  -moz-transform: translate3d(100px, 0, 0);
  -ms-transform: translate3d(100px, 0, 0);
  -o-transform: translate3d(100px, 0, 0);
  transform: translate3d(100px, 0, 0);
}

.info-block .js-copy.is-active,
.info-block .js-header.is-active {
  opacity: 1;
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -ms-transform: translate3d(0px, 0, 0);
  -o-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}


/*--- header ---*/


/*---- HEADER ----*/

.header {
  color: white;
  width: 100%;
  font-size: 50px;
  text-align: center;
  text-shadow: 4px 4px #000;
  padding: 0px 0;
  margin-top: 0px;
  font-family: sans-serif;
  /* background-image: url(/images/amsterdam.jpg) -25px -50px; */
  background-size: calc(100% + 50px);
  background-repeat: no-repeat;
  transform-style: preserve-3d;
}

.sub-header {
  padding-top: 0px;
  font-size: 30px;
  color: white;
  text-align: center;
  text-shadow: 2px 2px #000;
  letter-spacing: normal;
}

.header img {
  width: 100%;
  transform: translateZ(-1px) scale(2);
}

.header h2 h4 {
  position: relative;
}

body {
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  perspective: 1px;
  position: relative;
}

html {
  overflow: hidden;
}

<!DOCTYPE html>

<html>

<head>
  <link href="/css/main.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather:400,700,900" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700,700i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display" rel="stylesheet">
  <link href="/images/Png/r.png" rel="icon">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>RubensWebsite</title>
</head>

<body>
  <div class="menu">
    <div class="js-fadeIn-right">
      <ul>
        <li>
          <a href="#About-Me">About Me</a>
        </li>


        <li>
          <a href="#What-Do-I-Do">What do I do</a>
        </li>


        <li>
          <a href="#How-I-Work">How I Work</a>
        </li>


        <li>
          <a href="#Projects">Projects</a>
        </li>


        <li>
          <a href="#Who-I-Work-With">Who I work with</a>
        </li>


        <li>
          <a href="#Experiences">Experiences</a>
        </li>


        <li>
          <a href="#Contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="header" id="header">
    <img src="images/Header_Images/amsterdam.jpg">
    <h2 class="fadeIn-up">Ruben Nijhuis</h2>


    <h4 class="sub-header fadeIn-down">"A Front-End Developer"</h4>
  </div>


  <div id="container">
    <div class="content-wrapper">
      <div class="about-me">

        <h3 class="fadeIn-left-normal" id="About-Me">About me</h3>

        <!-- <img class="image fadeIn" src="/images/Paragraph_Images/thinking.jpeg" width="300" height="300"> -->

        <p class="fadeIn-right intro1" style="column-count: 1">
          15 years old, addicted to programming, loves hugs and is available for your project.<br> Always on the look for improving my own website, design and decision making.<br> I have an unique perspective on web-design and management.<br> Because
          I believe in coding the website myself instead of using pre-made templates.<br> The client wants a unique and new website, so why would you give them a pre-made design?

          <p class="fadeIn-right intro2" style="comlumn-count: 1">
            My dream is to go to this awesome place called Silicon Valley, <br> and to work for a big design company someday.<br> If you need a front-end-developer or looking for an eager intern.<br> Than have a look at this website.</p>

      </div>


      <div class="what-do-i-do info-block js-section">

        <!--<img class="image" src="/images/Paragraph_Images/coding.jpg" width="200" height="200"> -->

        <h3 class=" js-header" id="What-Do-I-Do">What do I do</h3>

        <p class=" info-block__copy js-copy" style="column-count: 1">
          I work as a front-end developer (if you don't know what that is go to this <a href="https://skillcrush.com/2016/02/11/skills-to-become-a-front-end-developer/" target="_blank">page</a>)<br> I develop interactive websites and can refresh your
          current site.<br> But I also like making the site interactive for the users of the website. Interested?<br> Take a gander at my projects.</p>
      </div>


      <div class="info-block js-section">
        <h3 class=" js-header" id="How-I-Work">How I work</h3>


        <p class=" info-block__copy js-copy" style="column-count: 1">
          Solo or group, I can work.<br> My preference does go to group projects. </p>

      </div>


      <div class="projects info-block js-section">
        <h3 class=" js-header" id="Projects">Projects</h3>


        <p class=" info-block__copy js-copy" style="column-count: 1">
          These are some projects that I have worked on over the last couple years.<br> These can vary from small games to huge websites.<br> It took me a lot of time and effort to make and finish these, even a short peek would also be appreciated.<br>          (The projects tab still needs to be added...<br> I should tell the developer this... oh wait)</p>
      </div>


      <div class="info-block js-section">
        <h3 class=" js-header" id="Who-I-Work-With">Who I work with</h3>


        <p class=" info-block__copy js-copy" style="column-count: 1">
        </p>
      </div>


      <div class="Experiences info-block js-section" id="Experiences">
        <h3 class=" js-header" id="Who-I-work-with">Experiences</h3>


        <p class=" info-block__copy js-copy" style="column-count: 1">Over the last couple years I've done internships at several companies.<br> These include</p>
      </div>


      <div class="links info-block" id="inspiration">
        <h3>Just some cool websites</h3>


        <h5>No description needed</h5>


        <ul class="websites">
          <li>
            <a href="https://www.sirinlabs.com/" target="_blank">Sirinlabs</a>
          </li>


          <li>
            <a href="https://www.awwwards.com/" target="_blank">Awwwards</a>
          </li>


          <li>
            <a href="https://thefwa.com/awards/page/1/" target="_blank">TheFwa</a>
          </li>


          <li>
            <a href="https://dribbble.com/" target="_blank">Dribbble</a>
          </li>
        </ul>
      </div>

    </div>

    <hr>


    <div class="footer" id="footer">
      <p id="Contact" class="e-mail">You won't believe it, you can send emails!</p>
      <br>


      <div class="button">
        <a class="button-extenal-link" href="mailto:rubennijhuis@rubenswebsite.com?subject=Contact">e-mail</a>
      </div>


      <p class="instagram">Btw there's Instagram nowaydays.</p>
      <br>


      <div>
        <a class="button-extenal-link" href="https://www.instagram.com/ruben_n_pics/" target="_blank">Instagram</a>
      </div>

      <div class="coffee">
        <p>Don't buy me a coffee. I.. I don't like it.</p>
      </div>


      <p>@2017</p>
    </div>
  </div>


  <div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src="js/script.js" type="text/javascript">
    </script>
  </div>
</body>

</html>

如果用户滚动到某个点，我使用的淡入淡出的 javascript 不起作用，因为我使用了视差。请帮助？

最佳答案

明白了，你现在的标题是这样的:

  <div class="header" id="header">
    <img src="images/Header_Images/amsterdam.jpg">
    <h2 class="fadeIn-up">Ruben Nijhuis</h2>


    <h4 class="sub-header fadeIn-down">"A Front-End Developer"</h4>
  </div>

你的 CSS 是:

.header img {
  width: 100%;
  transform: translateZ(-1px) scale(2);
}

尝试将标题内容包装在一个 div 中，您将通过 CSS 将背景图像应用于该 div。尝试使您的 html header 看起来像这样:

<div class="header" id="header">
    <div class="banner">
        <h2 class="fadeIn-up">Ruben Nijhuis</h2>

        <h4 class="sub-header fadeIn-down">"A Front-End Developer"</h4>
    </div>
</div>

尝试将这些样式添加到您的 CSS 以应用图像的视差背景并使您的横幅 div 的高度为 100% 以匹配您的主标题的高度:

.header .banner { 
   height: 100%; 
   margin: 0; 
   padding: 0; 
   background: url('/images/Header_Images/amsterdam.jpg'); 
   background-attachment: fixed; 
   background-size: cover; 
   background-position: center top; 
   background-repeat: no-repeat; 
}

这应该将您的图像应用为“背景”，并且您的横幅 div 中的所有内容都应该出现在顶部!我希望这次这个解决方案对你有用:P!

关于javascript - body 需要在视差图像前面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45967488/

javascript - body 需要在视差图像前面

上一篇：html - 在新行的开头制作 h4 标记换行符

下一篇：javascript - 设置-webkit-transform和使用JS进行转换