March 19, 2015

Make an event trigger when the window is scrolled to certain positions

Trigger events when the window is scrolled to certain positions

If you would like to call a function when the browser window goes beyond a certain point. (e.g the user scrolled the window down beyond 400px from the top). Trigger an event at that point.

Here i have triggered a div containing icons. It is triggered user scroll's down the page 400px from the top. You can give any number of pixels, at certain point where you need to trigger the event. This is mostly used to display nav bar on scroll, with position set as fixed on top of the page. So whenever the user scrolls to a certain position, the nav bar will appear and fixed on the top.

HTML

<div class="banner">
  <!-- some contents goes here -->
  <h1>Trigger events when the window is scrolled to certain positions</h1>
  <p>Scroll down to see the effect taking place</p>
</div>

<div class="icon-box" id="showOnScroll">
  <a href="https://twitter.com/vivinantony">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x color-twitter"></i>
      <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
    </span>
  </a>
  <a href="https://www.facebook.com/TheLittleTechie">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x color-facebook"></i>
      <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
    </span>
  </a>
  <a href="https://plus.google.com/104070651474939118104">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x color-googleplus"></i>
      <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
    </span>
  </a>
  <a href="http://codepen.io/vivinantony">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x color-codepen"></i>
      <i class="fa fa-codepen fa-stack-1x fa-inverse"></i>
    </span>
  </a>
  <a href="https://www.github.com/vivinantony">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x color-github"></i>
      <i class="fa fa-github fa-stack-1x fa-inverse"></i>
    </span>
  </a>
</div>

CSS

body {
  height: 1000px
}
.banner {
  max-width: 100%;
  height: 300px;
  background: #fff;
  padding: 10px;
  text-align: center;
  position: relative
}
.banner h1 {
  color: green;
  text-transform: uppercase;
}
.icon-box {
  position: fixed;
  top: 80px;
  left: 40%;
  right: 40%;
  z-index: 9999999999999;
  display: none;
  -webkit-transition: all 2s ease-in;
  -moz-transition: all 2s ease-in;
  -o-transition: all 2s ease-in;
  transition: all 2s ease-in;
}
.color-twitter {
  color: #55acee 
}
.color-facebook {
  color: #3b5998 
}
.color-googleplus {
  color: #dd4b39 
}
.color-codepen {
  color: #432880 
}
.color-github {
  color: #6cc644 
}

JavaScript

function showOnScroll(ev) {
  if(window.pageYOffset>400) {
    $("#showOnScroll").show();
  }
  else {
    $("#showOnScroll").hide();
  }
}
window.onscroll=showOnScroll

Attachments:

I have used external attachments.

//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
demo

No comments:

Post a Comment

Popular Posts

Views