How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?


Tags: javascript,jquery,html,css

Problem :

How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over it? I tride to do this with jquery but i didn't really work. Here's My HTML and 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;

}



Solution :

This is how you can do it.

$(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)"});


    });

});

Use CSS to see it back on hover

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

    CSS Howto..

    How to remove blue underline on text in Chrome - CSS?

    How to make submenus drop down below parent menu, instead of flying out?

    How to create a three-column website background using CSS?

    How not to mess up styling when using css frameworks

    How to maintain consistent text and image positioning using CSS

    jquery/css: I want to change the bgcolor of row only after hovering for 1 or 2 seconds. How to achieve this?

    How to set the specificity of a css over-ride class for XPages

    How to change accordion css to plain white?

    How to Remove the White Space below the Footer in Wordpress Site using CSS

    how to set a specific pixel or character width limit for a text in css

    How can I get as much of the text into a DIV row as possible?

    How to align content of a div to the bottom?

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?

    How can I horizontally align these divs?

    How can I resize images that are loaded onto a page?

    How do I disable position:fixed in web pages?

    How to replicate this css media jquery using javascript to support IE

    How to position background image in a button

    How do I tell a page to ignore internal CSS in favor of external CSS?

    How do I get one element to respond to the click of another element? - CSS/jQuery

    how to handle spanish character for classname in CSS file?

    How to use very large font sizes in Internet Explorer with CSS that won't affect design?

    How to make balloon textbook talking style using css

    How to use @Media queries

    My YouTube video wont show in iframe

    How can I split a text in 2 color vertically?

    How to remove a specific class on the clicked control?

    How to add space between border line and menu item

    How to make highlighted table with rowspan