仅在触发另一个事件后才如何触发事件功能？

时间：2019-04-11 23:24:21

标签： javascript jquery dom parallax

我只想在转轮增量> 0时触发onscroll事件功能。也许我的代码缺少监听器？甚至有可能吗？我不知道。

还尝试了一个简单的if并使用一个函数调用这两个函数。
一直在检查bind方法，第一个和第二个函数方法，jquery，但是对此我实在是个菜鸟。

(function(){
var parallax = document.querySelectorAll("body"); 
 var speed = -0.5;

 window.onscroll = function(){
 window.onwheel = function(el){
  var delta = el.originalEvent.deltaY;
  while (delta > 0){
    [].slice.call(parallax).forEach(function(el,i){
      var windowYOffset = window.pageYOffset,
          elBackgrounPos =  "50% " + (windowYOffset * speed) + "px";
      el.style.backgroundPosition = elBackgrounPos;
      });
    }
  };
};
})();

我想实现具有视差的背景图像，该图像仅在向下滚动页面时才移动（向上）。

1 个答案:

答案 0 :(得分：0)

(function(){
     var i=40;
/*setInterval(function(){
  
},500);*/
var  speed = -0.5,val;

window.onwheel=function(e){
val=e.deltaY;

}
window.onscroll = function(){
    if(val>-100 || val==null ){
      var parallax = document.querySelectorAll("body")[0];
      parallax.style.backgroundPositionY=i*50+"px";
    i++;
  }
 
  
};

})();
 .grid-header{   
 display: grid;
 grid-template-columns: auto auto auto; 
 grid-template-areas: "logo enterprize nav";
 align-items: center;
 justify-items: center;
}

.logo img {
 width: 100%;
 height: auto;
 max-width: 300px;
 grid-area: logo;
}

.enterprize{
 grid-area: enterprize;
 align-self: top;
}

nav {
 font-size: 25px;
 grid-area: nav;
}
.nav a {
 color: crimson;
 text-decoration: none;
}
@media (max-width: 800px){
   .grid-header{

     grid-template-areas:
       "logo nav"
       "enterprize enterprize";
   }
 }

.nav ul{
 list-style: none;
}

h1{
 font-family: 'Faster One', cursive;
 margin-bottom: auto;
 font-size: 40px;
 text-align: center;
}

.enterprize{
 align-self: end;
 align-self: center;
 justify-self: center;
}

h2{
 font-family: 'Fredericka the Great', cursive;
 font-size: 30px;
 text-align: center;
}

form{
 margin-bottom: 10px;
 text-align: center;
}
input[type="email"] {
 max-width: 250px;
 width: 80%;
 padding: 5px;
 border-radius: 2px;
 font-weight: bold;
}
input[type="email"]:hover {
 background-color: darkblue;
 transition: background-color 1s;
 color: white;
 font-weight: bold;
}
 
.btn {
 padding: 0 20px;
 height: 40px;
 max-width: auto;
 font-size: 1em;
 font-weight: 900;
 text-transform: uppercase;
 border: 3px white solid;
 border-radius: 10px;
 background: crimson;
 cursor: pointer;
}

#tour{
 display: flex;
 justify-content: center;
 margin-bottom: 20px;  
}

iframe {
 max-width: 600px;
 width: 100%;
}

.material-icons{
 color: crimson;
 float: left;

}

#concept{
 display: flex;
 flex-direction: row;
 text-align: ;
 justify-content: center;
 justify-content: space-around;
 
}
@media (max-width: 500px){
 #concept{
     flex-direction: column;
 }
}
.statement{
 background: rgba(76, 20, 80, 0.6);
 border-radius: 3px;    
 font-family: 'Black Ops One';
 font-size: 20px;
 margin: 2px
}
.points{
 font-family: '';
 }

#programs{
 text-align: center;
 font-family: ;
 list-style: none;
 font-size: 20px;
}
#programs a{
 text-decoration: none;
 color: black;
}
#programs ul{
 list-style: none;
}

#programs a:hover {
 color: yellow;
 
}

#programs a:active {
 color: blue;
} 

.footer{
 display:float;
 float: right;
}


#div_onfo {
   background-color:#eeeeee;
   display:inline;      
 
}
#ul_onfo li{
   display: inline;
 
}


   body {
    
      background:url(https://farm8.staticflickr.com/7562/28240993325_ced13b21d3_b.jpg)  ; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
     
     
   }
  

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Alfa+Slab+One|Audiowide|Black+Ops+One|Faster+One|Fredericka+the+Great">


 <header id="header">
   <body style="background-position-y: 400px;">
  <div class="grid-header">
   <div class="logo">
      <img id="header-img" src="http://www.70slivekidvid.com/space/salogo.jpg" alt="logo" />
  </div>

    <div class="nav">
      <nav id="nav-bar">
     <ul>
      <li><a class="nav-link" href="#tour">Tour</a></li>
      <li><a class="nav-link" href="#concept">Concept</a></li>
      <li><a class="nav-link" href="#programs">Programs</a></li>
      <li><a class="nav-link" href="#tuition">Tuition & Fees</a></li>
     </ul>
    </nav>
   </div>
        <div class="enterprize">
      <h1>Space Academy</h1>
    </div>
  </div>
 </header>

  <section id="future">
          
          <h2>Forging Galactic Citizens </h2>
          <form id="form" action="https://www.freecodecamp.com/email-submit">
            <input name="email" id="email" type="email" placeholder="Enter your email address" required/>
            <input id="submit" type="submit" value="Request information" class="btn"></input>
          </form>
        </section>
    
  <section id="tour">
    <iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/ ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen>  
      </iframe>
  </section>
                
  <section id="concept">
    
    <div class="statement" id="mission">
      <div class="icon"><i class="material-icons">flight</i></div>
      
        Mission
      <div class="points">
       <ul>
        <li>Conquest space.</li>
        <li>Shape skillfull and diligent ship dwellers ready to take on exploration, establishment and maintenance missions.</li>
        <li>Channel individuals to their most productive destinies.</li>
        <li>Lorem ipsum.</li>
      </ul>
      </div>
       </div>
    <div class="statement" id="vision">
      <div class="icon"><i class="material-icons">school</i></div>

        Vision
      <div class="points">

       <ul>
        <li>Assure an opportunity for survival in planetless circumstances.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Lorem ipsum.</li>
        <li>Lorem ipsum.</li>
      </ul>
      </div>
      </div>
    <div class="statement" id="values">
      <div class="icon"><i class="material-icons">all_inclusive</i></div>
      
        Values
      <div class="points">
      
       <ul>
        <li>We believe that the most productive careers are the ones that start channeling small successes on an accurate path.</li>
        <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum.</li>
      </ul>
      </div>
       </div>
  </section>
      
  <section id="programs">
    <ul>
      <li><a href="#">Asteroid mining</a></li>
      <li><a href="#">Pipe engineering</a></li>
       <li><a href="#">Space farming</a></li>
    <li><a href="#">Ships maintenance</a></li>
      <li><a href="#">Debris collection</a></li>
      <li><a href="#">Satellite maintenance</a></li>
      <li><a href="#">Space Turism</a></li>
      <li><a href="#">Lorem ipsum</a></li>
    </ul>
  </section>
      
  <section id="tuition">
    How much does college cost? It's a question we hear often at Space Academy. You'll be pleased to know that not only will you get an excellent college or graduate education from award-winning instructions at SA, but you'll also be able to take part on highly paid patrols and missions and be sponsored according to your performance.

Plus, UN residents get a special disccount.

Here's what we mean: ...
  </section>

      
   <div class="footer">
    <div id="div_onfo">
    <ul id="ul_onfo">
        <li><a href="" class="onfo"> Contact</a></li>
        <li><a href="" class="onfo"> Map</a></li>
        <li><a href="" class="onfo"> Employment</a></li>
    </ul>
</div>
   </div>


  
</body>

相关问题
最新问题