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..

    CSS: How to add icon/image after input element

    CSS: How to style text in a box with a limited height

    hide show div using nav html5 query javascript

    How to make 2 divs on 1 side (up&down)

    How to slide down to show content of DIV using CSS/jQuery?

    How to set opacity for background images using css?

    How to get the first parent that has a certain CSS property using jQuery?

    How to specify multiple hover event targets in CSS?

    How to add CSS to page to the bottom of the custom chrome extension

    using a simple list item
  • what am I doing wrong. background color doesnt show up
  • How to repeat multiple images over one element using CSS

    How to optimize this css code? [closed]

    How do I align an absolute position child element in the center of its parent div [duplicate]

    css3 pure: how to hover an element outside?

    How to place an element in top of another using CSS (without using absolute position)?

    How to make a transparent border using CSS?

    How to override cloudmade maps css with your own css? [closed]

    How to precisely center bootstrap grid in html page?

    How to write a more specific css

    How to align the wizard to the left and right sides?

    How to use objects returned by a function?

    How to define CSS rules relative to previously defined values witout re-writing them?

    Make converted joomla template show 2 colums in main content

    how to add css to selected row in treegrid GXT 3

    How to CSS select each first div without class after div with class?

    How to create a white border circle having white exclamation mark inside a box having a yellow background in html/css?

    How to send CSS to the client using HTTP response headers?

    How can I set up my menu to slide out, only when the header is hovered on?

    How to create a master page using HTML? [closed]

    How to overlay a form field over an image with a fixed width?