粘性侧边栏-GeneratePress主题

GeneratePress主题如何设置粘性侧边栏

尝试添加此 CSS:

@media(min-width: 769px) {
    .both-sidebars .site-content {
        display: flex;
    }
    #left-sidebar, #primary, #right-sidebar {
        left: unset;
    }
    #left-sidebar {
        order: -1;
    }
    .inside-left-sidebar, .inside-right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 100px;
    }
}

如果你使用 GP 3.0 与弹性框结构一起使用,只需要以下内容:

/* Stick sidebars */

@media(min-width: 769px) {
    /* stick right sidebar */
    .inside-right-sidebar,
    .inside-left-sidebar  {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }
}

如果你只想最后一个小部件作为粘性在侧边栏中,只需添加以下css:

/* Stick last widgets in sidebars */

@media(min-width: 769px) {
    .inside-right-sidebar,
    .inside-left-sidebar {
        height: 100%;
    }
    .inside-right-sidebar .widget:last-child,
    .inside-left-sidebar .widget:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }
}

如何只需右侧边栏的最后一个块具有粘性?试试这个 CSS:


.inside-right-sidebar {
    height: 100%;
}

.inside-right-sidebar > *:last-child {
    position: sticky;
    top: 100px;
}
声明:本站资源绿色无后门无广告,可放心下载。如无特殊说明或标注,均为本站原创发布,转载请注明出处!