推挤菜单固定在顶部答案

【问题标题】：Pushy menu fixed to top推挤菜单固定在顶部
【发布时间】：2017-01-18 14:29:10
【问题描述】：

在这个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 */
}

【问题讨论】：

先备份你的文件……然后试试这个。添加body { padding-top: 44px; }.menu-btn { position: fixed; top: 0; left: 0; z-index: 9999; transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); }.pushy-open-left .menu-btn { transform: translate(250px,0); }。删除 stgertrudelutheran.org/pushy-menu/scss/pushy.scss 中的第 54-61 行（应以选择器 .pushy-open-left{ #container, .push{ 开头）
我会试一试，告诉你它是如何工作的

标签： html css

【解决方案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>

【讨论】：

【解决方案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;
    }

【讨论】：