Jquery DIV滾動至瀏覽器頂部位置固定


獲取元素(這里定位元素A)距離頂部的高度,接着設定scroll滾動的事件,比如超過那個高度,把A的位置設定為fixed,小於該高度,修改回relative。

 
方法一:
$(function() { 
     var elm = $('.nav'); 
     var startPos = $(elm).offset().top; 
     $.event.add(window, "scroll", function() { 
         var p = $(window).scrollTop(); 
         $(elm).css('position',((p) > startPos) ? 'fixed' : 'static'); 
         $(elm).css('top',((p) > startPos) ? '0px' : ''); 
     }); 
}); 
 
方法二:
$(function(){
//獲取要定位元素距離瀏覽器頂部的距離
var navH = $(".nav").offset().top;
 
//滾動條事件
$(window).scroll(function(){
//獲取滾動條的滑動距離
var scroH = $(this).scrollTop();
//滾動條的滑動距離大於等於定位元素距離瀏覽器頂部的距離,就固定,反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0});
}else if(scroH<navH){
$(".nav").css({"position":"static"});
}
})
})
 
例:
<html> 
<head> 
<title>位置固定(</title> 
<script src="__COMS__/Jq/jquery-1.7.2.min.js"></script>
 
<style type="text/css"> 
.fixed_div{ 
position:fixed; 
left:200px; 
bottom:20px; 
width:400px; 
}
</style> 
<script type="text/javascript">
$(function(){
//獲取要定位元素距離瀏覽器頂部的距離
var navH = $(".nav").offset().top;
 
//滾動條事件
$(window).scroll(function(){
//獲取滾動條的滑動距離
var scroH = $(this).scrollTop();
//滾動條的滑動距離大於等於定位元素距離瀏覽器頂部的距離,就固定,反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0});
}else if(scroH<navH){
$(".nav").css({"position":"static"});
}
})
})
</script>
</head> 
<body>
<div class="top">top</div>
<p> </p>
<hr>
<div class="nav">topnav</div>
 
<div class="fixed_div" >content, I'm content</div> 
<div ></div> 
</body> 
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM