Question

我使用的一些代码遇到了一些麻烦。

上下文：
我正在使用Twitter Bootstrap 3作为网站，我希望导航栏固定在顶部。当我向下滚动时，我希望导航栏获得白色背景和不同颜色的文本。当我向下滚动60px时会触发此操作。

由于Bootstrap有一个可折叠的菜单，我希望只要点击“navbar-toggle”就可以让整个导航栏获得白色背景。到目前为止一切都那么好，一切正常，但这就是事情。菜单需要几毫秒才能折叠，我不希望导航栏的白色背景在导航栏折叠的同时变为透明。（希望有道理）所以我所做的就是创建2个函数来打开或关闭css类。（对于记录：我使用了css过渡，它们完美地工作;））

当我在javascript中点击并滚动事件观察器时出现了问题。当我点击“导航栏切换”时，延迟启动并且折叠菜单消失，而导航栏变为透明。但是当我滚动它时没有，并在滚动像素后立即变为透明。

希望它有道理并希望你能帮助我解决这个问题。另请注意，我有4种情况atm会折叠导航栏。 1.单击导航中的链接 2.在导航外单击滚动 4.单击导航栏切换本身

使用Javascript：

// Pixels from the top before navbar turns on (gets white background)
var header_toggle_height = 60;

$('.navbar-toggle').click(function(event) {
    if (!close_header('turnOff')) {
        headerOn(); 
    }
});

// Close the header parts
function close_header(option){

    // set default option 
    option = typeof option !== 'undefined' ? option : 'close_header';

    // Set var to tell if navigation is expanded
    var expanded = $('.navbar-collapse').attr('aria-expanded');

    // Default result
    var result = false;

    switch(option) {
        case 'close_header':
            close_header('delOff')
            break;
        case 'collapse_nav':
            collapse_nav();
            break;
        case 'turnOff':
            if ( expanded === 'true' ) { 
                close_header('delOff'); 
            } else {
                result = headerOff();
            }
            break;
        case 'delOff':
            collapse_nav();
            setTimeout("result = headerOff()",300);
            break;
    }

    return result;
}

// When the user scrolls collapse the navigation and at certain hight from top turn off navbar (make it transparent)
$(window).scroll(function(event){
    if ($(window).scrollTop() >= header_toggle_height) {
        headerOn();
    } else if ($(window).scrollTop() < header_toggle_height) {
        close_header('turnOff'); 
    }
});

// Turn the header on (make it white)
function headerOn() {

    if ( !$('.navbar').hasClass('scrolled') ) { 
        $('.navbar').addClass('scrolled');  
        return true;
    } else {
        return false;
    }

 }

// Turn the header off (Make it transparant), when at a certain point from the top.
function headerOff () {

    if ($('.navbar').hasClass('scrolled') && $(window).scrollTop() <= header_toggle_height ) {
        $('.navbar').toggleClass('scrolled');   
        return true;
    } else {
        return false;
    }

}

//Collapse navigation on mobile
function collapse_nav () {
    $('.navbar-collapse').collapse('hide');
}

HTML 注意：不要介意导航栏类中的php。那是为了不同的东西

    <header>
        <!-- NAVBAR
        ===========================================-->
        <nav class="navbar-wrapper">
            <div class="navbar navbar-collapsed-lg   navbar-default navbar-fixed-top <?php if (isset($_GET['FlightCode'])){ ?> navbar-fixed-top-calc <?php } ?>" id="autoscroll" role="navigation">
                <div class="container" >
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="/"><?php echo $to_title_p1; ?><span><?php echo $to_title_p2 ?></span><?php echo $to_title_p3 ?></a>
                    </div> <!-- navbar-header -->
                    <?php
                        wp_nav_menu( array (

                            'theme_location'    => 'primary',
                            'container'         => 'nav',
                            'container_class'   => 'navigation-scroll navbar-collapse navbar-header-collapse collapse',
                            'menu_class'        => 'nav navbar-nav navbar-right'

                        ) );    
                    ?>
                </div> <!-- container -->
            </div> <!-- navbar -->
        </nav> <!-- navbar-wrapper -->
    </header> <!-- header -->

setTimeout仅在一种情况下工作

0 个答案: