javascript - 隐藏桌面的div并在手机中显示它

Question

我有一个粘性 div 作为我的顶部菜单。作为标准，它一直显示在所有页面上，但我想在桌面模式下隐藏它并在手机上显示它。

所以这是我所做的:

 @media (min-width: 992px) {
    #sp-header-sticky-wrapper {
        display: none;
        visibility: hidden;
        clear: both;
        font-size: 0;
        max-height: 0;
        line-height: 0;
        height: 0px !important;
        padding: 0;
        (optional) mso-hide: all;
        /* hide elements in Outlook 2007-2013 */
        (optional)
    }
    div#sp-header-sticky-wrapper.sticky-wrapper {
        display: none;
        visibility: hidden;
        clear: both;
        font-size: 0;
        max-height: 0;
        line-height: 0;
        height: 0px !important;
        padding: 0;
        (optional) mso-hide: all;
        /* hide elements in Outlook 2007-2013 */
        (optional)
    }
}

在电话上:

  @media (max-width: 991px) {
    #sp-header-sticky-wrapper {
        display: block !important;
        visibility: visible;
    }
    div#sp-header-sticky-wrapper.sticky-wrapper {
        display: block !important;
        visibility: visible;
    }
}

它在手机/平板电脑上运行良好，但在桌面模式下。有一个问题。

每次我单击我的菜单/其他位置上的链接时，它都会显示隐藏的 div 0.x 秒，然后将其隐藏。就像白框显示它，然后在一段时间后隐藏起来，所以当我重新加载页面时，该网站总是“向上移动”。

解决办法是什么？它可能有一个好处，我应该提到它是一个 Joomla 运行页面，所以它可能与 css 文件的读取有关，或者？

我可以尝试使用 Javascript 还是不可能？

Answer 1

首先，这是关于此的最佳文章:https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

其次:不要使用 visibility: visible/hidden，而是 display: none/block，效果更好。

我会像这样放置主要样式:

.desktop-div { display: block; }
.mobile-div { display: none; }

@media { .desktop-div { display: none; } .mobile-div { display: block; } }