Question

当我向下滚动并在向上滚动或将鼠标悬停在其上时，如何使导航栏变得透明？我试图用jquery做这个，但我没有真正工作。这是我的HTML和CSS：

<DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="LunchWebsiteCSS.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(window).scroll(
                {
                    previousTop: 0
                }, 
                function () {
                var currentTop = $(window).scrollTop();
                if (currentTop < this.previousTop) {
                    //$(".sidebar em").text("Up"); /* optional for demo */
                    $(".nav").css({ opacity: 0.5 });
                } else {
                    //$(".sidebar em").text("Down");
                    $(".nav").css({ opacity: 0 });
                }
                this.previousTop = currentTop;
            });

        });
    </script>
    <script src="js/jjquery.js"></script>
</head>
<body>
    <div class="nav">
        <ul>
            <div class="btn-group">
                <li><a href="#">Browse</a>

                </li>
                <li><a href="#">Sign Up</a>

                </li>
                <li>BHS Lunch</li>
                <li><a href="#">Log In</a>

                </li>
                <li><a href="#">Help</a>

                </li>
            </div>
        </ul>
    </div>

</body>

.nav {
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
width: 100%;
/*border: 1px solid black;*/
/*background-color: #AA3C39;*/
background-color: #AA3C39;
/*opacity: 0.7;*/
position: fixed;

}

Answer 1

这就是你可以做到的。

$(document).ready(function(){

    $(window).scroll(function(){

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

    else
    $(".nav").css({"background-color" : "rgba(0,0,0,1)"});


    });

});

使用CSS在悬停时看到它

.nav:hover
{
 background-color:rgba(0,0,0,1);
}

当我向上滚动并在向上滚动或当我将鼠标悬停在上面时，如何使导航条变得透明？

1 个答案: