导航栏上的导航栏

时间:2016-02-22 15:14:52

标签: javascript html css twitter-bootstrap

我正试图让我的导航栏在滚动时变得透明,似乎没有任何效果。她是我一直在使用的代码。有什么建议吗?

//transparent scroll

$(document).ready(function(){

    $(window).scroll(function(){

    if($(window).scrollTop()>100)
    $(".navbar").css({"background-color" : "rgba(0,0,0,.5)"});

    else
    $(".navbar").css({"background-color" : "transparent"});


    });

});

CSS
/* navbar */
.navbar-default {
    background-color: $back-two;
    border-bottom: 0.5px solid #979797;
}

/* link */
.navbar-default .navbar-nav > li > a {
    color: $textcol;
    font-family: 'Montserrat';
    font-size: 15px;
}

//hover
.navbar-default .navbar-nav > li > a {
    border-bottom: 2px solid transparent;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s; 
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    border-bottom: 2px solid $accent;                    
}

//focus
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    background-color: $back-two;
    border-bottom: 2px solid $accent;  
}

.navbar-toggle {
    background-color: transparent;
}


HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 page-scroll" href="#page-top">Ross Finn</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav pull-right">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#work">Work</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#tf-contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

1 个答案:

答案 0 :(得分:1)

尝试这样


set(Python_ADDITIONAL_VERSIONS 3.4)
find_package(PythonLibs 3 REQUIRED)