如何将滚动条固定在某个位置 slimscroll插件

 我来答

1个回答

匿名用户
推荐于2017-12-16

展开全部

//html
<body>  
<div style="background:#003366;height:500px;">空div</div> 
<div  class="purple" style="height:500px;width:200px;background:purple">
<div class="nb" style="height:100px;width:100px;background:#9966FF">移动到顶部固定不变</div>  
</div>
<div class="red" style="background:#ff0000;height:1500px;">空div</div>  
<div style="background:#ccc;height:1500px;">空div</div>  
<div class="nb2" style="height:100px;width:100px;background:gray;">移动到底部固定不变</div> 
</body> 
//js
$(function(){  
    //获取要定位元素距离浏览器顶部的距离 
    var navH = $(".nb").offset().top;  
    var navH2 = $(".nb2").offset().top; 
    var Pur= $(".purple").offset().top;     //紫色块
    var Red= $(".red").offset().top;     //红色块
    //滚动条事件  
    $(window).scroll(function(){  
      //获取滚动条的滑动距离  
      var scroH = $(this).scrollTop();  
      //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定  
      if(scroH>=navH){  
        $(".nb").css({"position":"fixed","top":0});  
      }else if(scroH<navH){  
        $(".nb").css({"position":"static"});    
      }
      if(scroH <= navH2){  
        $(".nb2").css({"position":"fixed","bottom":"15px","right":"15px"});  
      }else if(scroH<navH){  
        $(".nb2").css({"position":"static"});    
      }
      if(scroH >= Pur && scroH <= Red){
        $(".nb").css({"position":"static"});  //在紫色块的时候不固定
        $(".nb2").css({"position":"static"});  //在紫色块的时候不固定
      }
    })  
  })


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何将滚动条固定在某个位置 slimscroll插件

其他类似问题

为你推荐：