从 div 的页面顶部下拉

Question

我创建了这个弹出窗口，当您滚动到页面底部时会弹出。

我想采用相同的想法，但让它从页面顶部弹出，并在页面上的特定点（不是顶部或底部，而是在某个 div )。

这是我目前创建此弹出窗口的方式：

$(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>

那么，我怎样才能操纵这个相同的方法，使弹出窗口在页面中的某个点从 TOP 下降。 目标是创建一个新的导航，一旦你在某个地点。 **我不想创建粘性 div。我根本不希望它显示在屏幕上，类似于我包含的弹出示例。

例如：

<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>

Answer 1

这是更改后的 sn-p，下面是更改内容的说明。

$(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>

为此，我们对 CSS 进行了一些更改：

#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;
}

将元素定位在bottom 的CSS 更改为top，动画位置也更改为从top 过渡。

唯一的其他变化是在 javascript 中：

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

条件已更改，当滚动条位于屏幕下方四分之一以上时，它会显示下拉菜单，并保持在那里，除非用户在此上方滚动。

Answer 2

您可以检查 scroll-y 位置何时大于或等于目标元素的顶部位置。

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

示例

我创建了一个 jQuery 插件，以便更轻松地重用此功能。

(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>