javascript小技巧-判断窗口位置变更class

最近在研究手机模板，期间就需要做一个判断滑动变更class属性的。也就是常见的菜单跟随一个原理。

先说理论：判断窗口的位置，然后来更改class的值。那么我们先写好两个地方的class值。然后做个判断来变更他们。

  1. .topbar{
  2.   display: block;
  3.   overflow: hidden;
  4.   padding: 10px;
  5.   clear: both;
  6.   background-color: #fff;
  7. }
  8. .topbarg {
  9.     padding: 10px;
  10.     background-color: rgba(255, 255, 255, 0.56);
  11.     z-index: 100;
  12.     position: fixed;
  13.     top: 0;
  14.     left: 0;
  15.     width: 100%;
  16. }

而，要更改的这个代码，加入一个id，用于js判断是更改哪里的。

  1. <div class="topbar">
  2. <!-- 跟随变化的地方 -->
  3. </div>
  5. <!-- 上面代码改为如下 -->
  6. <div id="top" class="topbar"> </div>

上面的工资准备好，下面就来利用一段简单的JS来实现啦！

  1. <script type="text/javascript">
  2. window.onscroll = function(){
  3.     var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
  5.     if(scrollTop > 50){
  6.         document.getElementById('top').className = 'topbarg';
  7.     }else{
  8.         document.getElementById('top').className = 'topbar';
  9.     }
  10. }
  11. </script>

这段代码，判断了离开顶部50px的时候，找到id=top的地方，替换class参数，如果不是，则替换回来。这个50px是.topbar自身总体的高度，这个可以后查看。

以上为方法，实际应用到网站时自己变通下。

 

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论：2   其中：访客  0   博主  0

  1. avatar 春熙路 1
    回复 2016年12月07日 20:05  -9楼

    进来看看

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情