滚动距离大于到元素本身（$("demo").offset().top）时，元素fixed到顶部，小于则恢复原来的状态

最新推荐文章于 2022-12-28 15:25:46 发布

zgjx2019

最新推荐文章于 2022-12-28 15:25:46 发布

阅读量535

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/zgjxyszh/article/details/79518710

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <title>demo(滚到top2的位置时元素fixed)</title>  
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  
    <style type="text/css">  
    *{margin: 0;padding: 0;border: 0;}  
    .sd{
      position: fixed;top: 0;left: 0;z-index: 999;
    }
    .as{
      visibility: hidden;height: 100px;
    }
    </style>  
    </head>  
    <body>  
    <div style="width: 100px;height: 100px;background-color: #ccc;text-align: center;font-size: 24px;position: fixed;top: 2%;right: 1%;z-index: 9999;">scroll: <p></p></div>   
    <div class="divtop" style="width: 1349px;height: 1000px;background: #666;">top1</div>  
      <a class="top" href="https://www.baidu.com" target="_blank" >scrollTop</a> 
      <div class="divtop3"></div>  
    <div class="divtop2" style="width: 1349px;height: 100px;background: #777;">top2</div> 
    
      <a class="scrollTarget" href="https://www.baidu.com" target="_blank" >scrollTarget</a>  
    <div style="width: 1349px;height: 100px;background: #888;">top3</div>  
      <a class="bottom" href="https://www.baidu.com" target="_blank" >scrollBottom</a>  
    <div style="width: 1349px;height: 1000px;background: #999;display:table-cell;    
        vertical-align:bottom;">bottom</div>  
    <script>  
    $(document).ready(function(){  
      
      $("a.top").click(function() {  
        $(window).scrollTop(0);  
        //或$("body,html").animate({"scrollTop":0},200);  
        return false;  
      });  
      
      $("a.scrollTarget").click(function(event) {  
        event.preventDefault();  
        $('html,body').stop().animate({scrollTop: $("a.scrollTarget").offset().top}, 200);  
        //return false;阻止href  
        //或者js  href="javascript:void(0)"   
        //或event.preventDefault();  
      });  
      
      function bottom() {$('html,body').animate({scrollTop: $(document).height()}, 200);return false;}  
      $("a.bottom").on("click",bottom);  
      
      $(window).scroll(function(){    
        var sh,ph,wh;  
        sh = $(window).scrollTop();    
        ph = $(".divtop3").offset().top;  
        wh = $(window).height();  
        $("p").text($(window).scrollTop()); 
        if (sh>ph) {
          //$(".divtop2").addClass("sd");
          $(".divtop3").addClass("as").next().addClass("sd");//添加一个class为as的类，使一个div顶住位置防止突变
        } else {
          //$(".divtop2").removeClass("sd");
          $(".divtop3").removeClass("as").next().removeClass("sd");
        } 
        if (sh+wh>ph) {  
          $(".divtop").css({"background-color":"red"});  
        } else {  
          $(".divtop").css({"background-color":"yellow"});  
        };  
      })  
    });  
      
    (function(){})();  
    $(function(){});  
    </script>  
      
    </body>  
    </html>

没滚动

滚动到top2时情况。

zgjx2019

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动距离大于到元素本身（$("demo").offset().top）时，元素fixed到顶部，小于则恢复原来的状态

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;demo(滚到top2的位置时元素fixed)&lt;/title&gt; &lt;script src="https://cdn.boo
复制链接

扫一扫