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

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

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

  1. .topbar{
  2.   displayblock;
  3.   overflowhidden;
  4.   padding10px;
  5.   clearboth;
  6.   background-color#fff;
  7. }
  8. .topbarg {
  9.     padding10px;
  10.     background-color: rgba(255, 255, 255, 0.56);
  11.     z-index: 100;
  12.     positionfixed;
  13.     top: 0;
  14.     left: 0;
  15.     width: 100%;
  16. }

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

  1. <div class="topbar">
  2. <!-- 跟随变化的地方 -->
  3. </div>
  4. <!-- 上面代码改为如下 -->
  5. <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;
  4.     if(scrollTop > 50){
  5.         document.getElementById('top').className = 'topbarg';
  6.     }else{
  7.         document.getElementById('top').className = 'topbar';
  8.     }
  9. }
  10. </script>

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

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

 

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

支付宝扫一扫赞助

微信钱包扫描赞助

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

  1. avatar 春熙路 1

    进来看看

评论加载中...

发表评论

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

图片 表情