Twitter Bootstrap Question posted in

Drop-down from top of page at div – Twitter bootstrap

I have this pop up created that pops up when you scroll to the bottom of the page.

I want to take the same idea but have it pop down from the TOP of the page, and at a specific point on the page (not at the top or bottom, but at a certain div).

Here’s the way I am currently creating this pop up:

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    $('#signup').addClass('show')
  } else {
    $('#signup').removeClass('show')
  }
});
$('#signup').on('click', '.close', function(e) {
  e.preventDefault();
  $('#signup').removeClass('show')
})
/* popup at end of page */
body {
  height: 1000px;
}

/* create a scrollbar for demo purposes */
#signup {
  position: fixed;
  z-index:100;
  width: 100%;
  bottom: -50px;
  height: 50px;
  left: 0;
  background-color: green;
  transition: bottom .5s linear;
  color: white;
  font-size: 2em;
  text-align: center
}
#signup.show {
  bottom: 0;
}

html { height: 2000px; } /* create a scrollbar for demo purposes */
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="signup" class="signup">
  <div class="container">
    <p class="text-xlg text-center">
      Don't have an account yet? Get started here &nbsp;
      <a class="btn btn-white btn-outline" href="#">Free Trial</a> &nbsp;
      <a class="btn btn-white btn-outline" href="#">Contact Us</a>
    </p>
    <a href="#" class="close"><i class="fa fa-times text-white"></i></a>
  </div>
</div>

So, how can I manipulate this same method to cause a pop-up to drop from the TOP at a certain point in the page. The goal is to create a new nav once you’re at a certain spot. **I do not want to create a sticky div. I don’t want it to be shown on the screen at all, similar to the pop-up example i included.

ex:

<nav>
  Here is the static nav bar
</nav>
<div>
  Likely a banner in here
</div>
<div class="new-nav">
  Once scrolled to this point, new nav pop up slides down from top.
</div>
Tags:

2

Answers


  1. 0

    Here is the changed snippet and below it is an explanation of what was changed.

    $(window).scroll(function() {
  if ($(window).scrollTop() >= ($(document).height() / 4)) {
    $('#signup').addClass('show')
  } else {
    $('#signup').removeClass('show')
  }
});
$('#signup').on('click', '.close', function(e) {
  e.preventDefault();
  $('#signup').removeClass('show')
})
    /* popup at end of page */

body {
  height: 1000px;
}
/* create a scrollbar for demo purposes */

#signup {
  position: fixed;
  z-index: 100;
  width: 100%;
  top: -60px;
  height: 50px;
  left: 0;
  background-color: green;
  transition: top .5s linear;
  color: white;
  font-size: 2em;
  text-align: center
}
#signup.show {
  top: 0;
}
html {
  height: 2000px;
}
/* create a scrollbar for demo purposes */
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="signup" class="signup">
  <div class="container">
    <p class="text-xlg text-center">
      Don't have an account yet? Get started here &nbsp;
      <a class="btn btn-white btn-outline" href="#">Free Trial</a> &nbsp;
      <a class="btn btn-white btn-outline" href="#">Contact Us</a>
    </p>
    <a href="#" class="close"><i class="fa fa-times text-white"></i></a>
  </div>
</div>

    So to do this a few CSS changes were made:

    #signup {
  position: fixed;
  z-index: 100;
  width: 100%;
  top: -60px;
  height: 50px;
  left: 0;
  background-color: green;
  transition: top .5s linear;
  color: white;
  font-size: 2em;
  text-align: center
}
#signup.show {
  top: 0;
}

    The CSS that positioned the element at the bottom was changed to top and the animation location was changed so it transitions from the top.

    The only other change was in the javascript:

    if ($(window).scrollTop() >= ($(document).height() / 4)) {

    The conditional was changed so that it shows the drop down when the scroll bar is more than a quarter down the screen and keep it there unless the user scroll back above this.

    Login or Signup to reply.
  2. 0

    You can check when the scroll-y position is greater then or equal to the top position of the target element.

    $(this).scrollTop() >= $('.new-nav').position().top

    Example

    I created a jQuery plugin to make it easier to reuse this functionality.

    (function($) {
  $.fn.onScrollTo = function(focusInFn, focusOutFn) {
    var $this = this;
    $(document).scroll(function() {
      var y = $(this).scrollTop();
      if (y >= $this.position().top) {
        if (focusInFn) focusInFn();
      } else {
        if (focusOutFn) focusOutFn();
      }
    });
  }
})(jQuery);

$('.new-nav').onScrollTo(function() {
  $('#signup').addClass('show');
}, function() {
  $('#signup').removeClass('show');
});

$('#signup').on('click', '.close', function(e) {
  e.preventDefault();
  $('#signup').removeClass('show');
})
    .container { position: relative; }

/* create a scrollbar for demo purposes */
#signup {
  position: fixed;
  z-index:100;
  width: 100%;
  height: 80px;
  top: -80px;
  left: 0;
  background-color: green;
  transition: top 0.67s linear;
  color: white;
  font-size: 2em;
  text-align: center
}
#signup.show {
  top: 0;
}
#signup .close { position: absolute; top: 0.25em; right: 0.125em; }
#signup p { margin-top: 0.125em; line-height: 1.25em; }

nav { text-align: center; font-size: 1.25em; margin: 0.25em; }
.banner { text-align: center; font-size: 2em; margin: 1em; }
.new-nav { height: 800px; padding: 0.5em; }
.text-white { color: #FFFFFF; }
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav>
  Here is the static nav bar
</nav>
<div class="banner">
  Likely a banner in here
</div>
<div class="new-nav">
  Once scrolled to this point, new nav pop up slides down from top.
</div>

<div id="signup" class="signup">
  <div class="container">
    <p class="text-xlg text-center">
      Don't have an account yet? Get started here<br />
      <a class="btn btn-white btn-outline" href="#">Free Trial</a> &nbsp;
      <a class="btn btn-white btn-outline" href="#">Contact Us</a>
    </p>
    <a href="#" class="close"><i class="fa fa-times text-white"></i></a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search