Jquery DIV滚动至浏览器顶部位置固定

最新推荐文章于 2021-06-13 23:06:29 发布

super_xiaozhu

最新推荐文章于 2021-06-13 23:06:29 发布

阅读量414

点赞数

分类专栏： HTML 文章标签： css 固定 div 固定头部

本文链接：https://blog.csdn.net/u012538990/article/details/54232803

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

获取元素（这里定位元素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></head>
 <body>
  &nbsp; &nbsp; 
  <title>位置固定(</title>&nbsp; 
  <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>&nbsp; 
  <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> &nbsp;  
  <div class="top">top</div> 
  <p> </p> 
  <hr /> 
  <div class="nav">
   topnav
  </div> 
  <div class="fixed_div" style="border:1px solid #200888;">
   content, I'm content
  </div>&nbsp; 
  <div style="height:888px;"></div>&nbsp; &nbsp; &nbsp;
 </body>
</html>

super_xiaozhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery DIV滚动至浏览器顶部位置固定

获取元素（这里定位元素A）距离顶部的高度，接着设定scroll滚动的事件，比如超过那个高度，把A的位置设定为fixed，小于该高度，修改回relative。方法一：$(function() { var elm = $('.nav'); var startPos = $(elm).offset().top; $.event.add(window, "scroll...
复制链接

扫一扫