search

ppoffice / hexo-theme-icarus

A simple, delicate, and modern theme for the static site generator Hexo.
https://ppoffice.github.io/hexo-theme-icarus/
MIT License
6.36k stars 1.55k forks source link

移动端导航栏只在顶端显示 #1075

Closed merept closed 2 years ago

merept commented 2 years ago

移动端当文章过长的时候，导航栏只在顶端显示，访问比较困难。

尤其是TOC，当想要快速跳转的时候必须要回到顶端，而且因为设置了TOC子目录折叠，就只能跳转到一级目录。

想问一下有没有解决方法可以让移动端的导航栏按钮可以一直浮动在某个地方？

BeaCox commented 2 years ago

移动端当文章过长的时候，导航栏只在顶端显示，访问比较困难。

尤其是TOC，当想要快速跳转的时候必须要回到顶端，而且因为设置了TOC子目录折叠，就只能跳转到一级目录。

想问一下有没有解决方法可以让移动端的导航栏按钮可以一直浮动在某个地方？

在icarus\include\style\navbar.style中加入以下代码：

/* ---------------------------------
 *           Top Navigation
 * --------------------------------- */
.navbar.is-fixed-top {
    position: sticky;
}

.navbar.is-fixed-bottom, .navbar.is-fixed-top {
    z-index: 50;
}

然后在icarus\layout\common\navbar.jsx找到return <nav class="navbar navbar-main">这一行（没改过的话应该在42行） 改成return <nav class="navbar navbar-main is-fixed-top"> 试试看

merept commented 2 years ago

移动端当文章过长的时候，导航栏只在顶端显示，访问比较困难。 尤其是TOC，当想要快速跳转的时候必须要回到顶端，而且因为设置了TOC子目录折叠，就只能跳转到一级目录。 想问一下有没有解决方法可以让移动端的导航栏按钮可以一直浮动在某个地方？

在icarus\include\style\navbar.style中加入以下代码：

/* ---------------------------------
 *           Top Navigation
 * --------------------------------- */
.navbar.is-fixed-top {
    position: sticky;
}

.navbar.is-fixed-bottom, .navbar.is-fixed-top {
    z-index: 50;
}

然后在icarus\layout\common\navbar.jsx找到return <nav class="navbar navbar-main">这一行（没改过的话应该在42行） 改成return <nav class="navbar navbar-main is-fixed-top"> 试试看

更改之后导航栏可以浮动了，但是整个页面也向上移动导致在顶部的时候有一部分内容被导航栏挡住了，这个有没有办法解决？

merept commented 2 years ago

就是说有没有办法更改页面的高度

BeaCox commented 2 years ago

就是说有没有办法更改页面的高度

可以试试把z-index调高一点比如80，100这样

merept commented 2 years ago

可以试试把z-index调高一点比如80，100这样

试过了，更改z-index没有用

merept commented 2 years ago

解决了。 在\include\style\responsive.styl文件里每个设备类型都配置对应的margin-top值就可以了

/* ---------------------------------
 *         Responsive Layout
 * --------------------------------- */
+widescreen()
    .is-1-column .container, .is-2-column .container
        max-width: $desktop - 2 * $gap
        width: $desktop - 2 * $gap
    .section
        margin-top: 1rem

+fullhd()
    .is-2-column .container
        max-width: $widescreen - 2 * $gap
        width: $widescreen - 2 * $gap

    .is-1-column .container
        max-width: $desktop - 2 * $gap
        width: $desktop - 2 * $gap

    .section
        margin-top: 1rem

+tablet()
    .is-sticky
        position: -webkit-sticky
        position: sticky
        top: 1.5rem
        z-index: 99

    .column-main, .column-left, .column-right, .column-right-shadow
        &.is-sticky
            top: .75rem
            align-self: flex-start

    .section
        margin-top: 6rem

+mobile()
    .section
        padding: 1.5rem 1rem
        margin-top: 8rem