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