Question

在此page上正在使用Pushy Menu。我希望它被固定在顶部。在Pushy的CSS中它有css `位置：固定;和顶部：0;默认情况下，当您向下滚动时它不会将菜单保持在顶部，当您向下滚动时菜单消失。我该如何解决这个问题？

/* Menu Appearance */
.pushy {
 position: fixed;
 width: 250px;
 height: 100%;
 top: 0;
 z-index: 9999;
 background: rgb(4, 147, 189); /* wasVery dark grey #191918 */
 overflow: auto;
 visibility: hidden;
 -webkit-overflow-scrolling: touch;
 /* enables momentum scrolling in iOS overflow elements */
}

Answer 1

       <style>
       /* Menu Appearance */
       .pushy {
       /* position: fixed;*/
        width: 250px;
        height: 100%;
        top: 0;
        z-index: 9999;
        background: rgb(4, 147, 189); /* wasVery dark grey #191918 */
        overflow: auto;
        visibility: hidden;
        -webkit-overflow-scrolling: touch;
        /* enables momentum scrolling in iOS overflow elements */
       }
       .fix{
         position: fixed;
         }
         </style> 
    <script>
         $(window).scroll(function(){

           var scroll = $(window).scrollTop();
            if (scroll >= 50)
            {
                $('.pushy').addClass('fix');
            }
            else {
                $('.pushy').removeClass('fix');
            }
        });
</script>

Answer 2

使用此选项并检查

.menu-btn {
        width: 100px;
        padding: 10px;
        margin-bottom: 30px;
        background: #000;
        color: #FFF;
        text-align: center;
        cursor: pointer;
        position: fixed;
    }
    h1 {
        margin-top: 90px;
    }

Pushy菜单固定在顶部

2 个答案: