当我将菜单切换为打开时,我想更改整个网站的类,以为菜单添加填充。有任何想法吗?否则,如果我像我上面的功能中那样向下滚动,则整个站点都可以正常工作,将固定的标头添加到body类中。

我自己的javascript代码段:

if ($(' #primary-navigation' ).hasClass( 'site-navigation .primary-navigation .toggled-on' )) {
    body.addClass( 'menu-padding' );
} else {
    body.removeClass( 'menu-padding' );
}


javascript中的body变量

function( $ ) {
    var body    = $( 'body' ),
        _window = $( window );


代替窗口宽度功能的代码段:

if ( _window.width() > 781 ) {
    var mastheadHeight = $( '#masthead' ).height(),
        toolbarOffset, mastheadOffset;

    if ( mastheadHeight > 48 ) {
        body.removeClass( 'masthead-fixed' );
    }

    if ( body.is( '.header-image' ) ) {
        toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
        mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;

        _window.on( 'scroll.twentyfourteen', function() {
            if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
                body.addClass( 'masthead-fixed' );
            } else {
                body.removeClass( 'masthead-fixed' );
            }
        } );
    }

    if ($(' #primary-navigation' ).hasClass( 'site-navigation .primary-navigation .toggled-on' )) {
        body.addClass( 'menu-padding' );
    } else {
        body.removeClass( 'menu-padding' );
    }
}


即时通讯将我的JavaScript添加到了Wordpress中的标头修复中,因为此功能仅在屏幕分辨率高于781像素时有效。

要为菜单添加填充的CSS

.menu-padding .site-main {
    margin-top: 48px;
}


身体div:

<body <?php body_class(); ?>>


导航菜单:

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
    <button class="menu-toggle">Menu function</button>
</nav>


单击导航类:

<nav id="primary-navigation" class="site-navigation primary-navigation toggled-on" role="navigation">
    <button class="menu-toggle">Menu function</button>
</nav>


site-main div:

<div id="main" class="site-main">content<div/>

最佳答案

我不是直接回答这个问题,而是要根据Windows的大小添加/更改类,为什么不使用css 3:@media all和(max-width:750px){...您对此屏幕的css定义大小...}?

10-05 20:55
查看更多