在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

以下是更改的代码段，下面是对更改内容的解释。

$(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插件，以便更轻松地重用此功能。

＆＃13;

＆＃13;

(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');
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;