Question

我认为这是可能的，但我可能错了。

我正在练习制作移动网站，我希望结合以下两项功能 - 向下滚动时Javascript缩小菜单栏。媒体查询在方向为横向时显示较大的菜单栏。

我有两个代码 - Javascript -

<script>
             $(document).scroll(function(){
        if ($(this).scrollTop()>1){
            // animate fixed div to small size:
            $('.container').stop().animate({ height: 40 },100);
            $('.menuicon').stop().animate({ height: 40, width: 40 },100);
        } else {
            //  animate fixed div to original size
            $('.container').stop().animate({ height: 100},100);
            $('.menuicon').stop().animate({ height: 100, width: 100},100);
        }
    }); 

    </script>

媒体查询 -

@media all and (orientation:landscape) {  
    .container{
    height:16%;
    }
    .menuicon{
    width:16%;
    }

    #menu{
    padding-top:16%;
            }
}

媒体查询在javascript之前工作正常，但是由于定义了高度之前和之后，它不再根据方向而改变。

有没有办法在我的javascript中包含这样的媒体查询？

谢谢！

Answer 1

所以我决定用这个路线走另一条路。

我创建了两组菜单类，一组用于Portrait，另一组用于Landscape。我使用display：none来隐藏任何不需要的东西并使用下面的CSS来指示要显示的内容 -

@media all and (orientation:landscape) {  
    .containerL{

        display:block;
    }
            .menuiconL{

                display:block;
    }



            #menu{
                padding-top:105px;
            }
} 

        @media all and (orientation:portrait) {
        .containerP{

        display:block;
    }
            .menuiconP{

                display:block;
    }
        }

Javascript高度和媒体查询同时进行

1 个答案: