在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插件，以便更容易重用此功能。

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