navbar changing colour from scrolling and div image to fit with object-fit

I am starting to write a new navbar but having a problem with the background colour and opacity and a divs image size. Firstly I want the top navbar background colour to be transparent when the page is at the top and unscrolled which I have working and then to change to a solid background colour when scrolled down 72px which also works but it doesn't change back to transparent when scrolled back up to the top? It should also fade the change in if possbile. Also I would like the div with the image in it to be the full width of the page using object-fit but so far it just covers about 95%. I would also like to be able put text over the image in the center but think I am using wrong method. I'm pretty new to this as you have probably guessed so any help would be greatly appreciated, many thanks in advance.

The html code is :

<div class="white">
  <ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
  </ul>
</div>

    <div class="container-fluid main" style="margin-top: px;">
    <img src="images/hero.jpg" class="main" alt="mainbg" width="400" height="300">
    </div>

    </div>

and the css is :

body{
  margin:0;
  padding:0;
  height:1000px;
}
.white{
  position:fixed;
  top:0;
z-index: 99999;
background-color:rgba(255, 255, 255, 0);
  width:100%;
  height:72px;


}
.white ul{
  list-style-type:none;
  padding:0;
}

.white ul li{
  display:inline-block;
  width:100px;
  color:red;
}

.blue{
  position:fixed;
  top:0;
  background:blue;
  width:100%;
  height:50px;
  transition: opacity 0.9s linear
}
.main {
    z-index: -1;
  -webkit-filter: blur(0.2px);
  -moz-filter: blur(0.2px);
  -o-filter: blur(0.2px);
  -ms-filter: blur(0.2px);
  filter: blur(0.2px);
    width:100%;
    height:550px;
    object-fit:cover;
}

.container {
    position: relative;
    text-align: center;
    color: white;
}

/* General Demo Style */
@import url(https://fonts.googleapis.com/css?family=Lato);
/* @import url(https://fonts.googleapis.com/css?family=Quicksand); */
@import url(https://fonts.googleapis.com/css?family=Heebo);
/* @import url(https://fonts.googleapis.com/css?family=Montserrat); */
html { height: 100%; width: 100%;margin: 0;padding: 0;}

* {margin: 0; padding: 0;}
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

body {
    font-family: 'Heebo', sans-serif;
    background: #fff;
    font-weight: 900;
    font-size: 16px;
    color: #333;
    overflow: scroll;
    overflow-x: hidden;
    vertical-align: middle;text-align: center;

}

a {
    color: grey;
    text-decoration: none;

}

.main {
  -webkit-filter: blur(0.2px);
  -moz-filter: blur(0.2px);
  -o-filter: blur(0.2px);
  -ms-filter: blur(0.2px);
  filter: blur(0.2px);

    width:100%;
    height:550px;
    object-fit:cover;

}

and the JS is :

$(document).ready(function(){
  $(window).scroll(function(){
    var scroll = $(window).scrollTop();
      if (scroll > 72) {
        $(".white").css("background" , "#00a4ff");
      }

      else{
          $(".white").css("background");    
      }
  })
})

1 answer

  • answered 2018-07-12 20:57 Sarah Pritchard

    Sorted, I used the toggleClass and set IDs for the classes and divs i needed to change. Many thanks for the help and hope it can save someone else a little time, worth learning though! The JS is:

    $(document).ready(function(){
      $(window).scroll(function(){
        var scroll = $(window).scrollTop();
    
        $('#nav').toggleClass('before10',!(scroll > 10)); // toggle Class ad or remove a class considering the second parameter being true or false
        $('#nav').toggleClass('after10',(scroll > 10));// toggle Class ad or remove a class considering the second parameter being true or false
        $('#number').toggleClass('nav-number',!(scroll > 10)); // toggle Class ad or remove a class considering the second parameter being true or false
        $('#number').toggleClass('nav-number2',(scroll > 10));// toggle Class ad or remove a class considering the second parameter being true or false
    
      })
    })
    

    and the CSS is :

    .before10 {text-decoration: none;backgroundcolor:rgba(255, 255, 255, 0);}
    
    .after10 {text-decoration: none;background:#362c6e;color:#ffffff;}
    
    .before10 a:link {text-decoration: none;color:#362c6e;}
    
    .after10 a:link {text-decoration: none;color:#ffffff;}
    
    .after10 a:hover {text-decoration: none;color:#e73972;}
    
    .before10 a:hover {text-decoration: none;color:#e73972;}