Rabner Casandara Rabner Casandara - 1 month ago 8
HTML Question

How To Change Logo Size And Hide Some Div On Scroll Down

i want to shrink my logo and hide some div and change menubar position on scroll.I shrink my nav bar on scroll but on shrink menuitem position and logo is not shrinking like,
i want to hide my div class contact_details and change div class nav_bar margin and size of logo on right

<header>
<div class="top_nav">
<div class="logo">
<a id="site-logo" href="#"><img src="#" alt="LOGO"></a>
</div>
<div class="contact_details">
<p>Need Help, Call: 062 445676654 |<a href="#"> Mail</a></p>
</div>
<div class="nav_bar">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Solution</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
</header>
<div class="container">
</div>
<div class="site-dt">

</div>

*{
margin: 0;
padding: 0;
}

/* Top Menu Start Here */

.top_nav{
width: 100%;
background: rgba(0,0,0,.5);
position: fixed;
}

.top_nav .logo{
margin-top: 2px;
margin-left: 20px;
height: 75px;
width: 200px;
float: left;
position: absolute;
}

.contact_details{
margin-top: 5px;
margin-left: 1115px;
min-height: 25px;
min-width: 230px;
float: right;
color: #fff;
position: absolute;
}

.contact_details p{
font-size: 14px;
text-align: center;
}

.contact_details p a{
text-decoration: none;
color: #fff;
}

.nav_bar{
margin-left: 700px;
margin-top: 55px;
position: absolute;
}

.nav_bar ul{
list-style-type: none;
}

.nav_bar ul li{
display: inline-block;
text-align: center;
float: left;
}

.nav_bar ul li a{
text-decoration: none;
padding: 12px;
margin: 8px;
font-size: 20px;
color: #fff;
position: relative;
}

.nav_bar ul li a::after{
content: '';
display: inline-block;
position:absolute;
width: 0px;
height: 5px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #ff6600;
transition: width .4s;
}

.nav_bar ul li a:hover::after{
width: 100%;

}

.container{
height: 100vh;
width: 100%;
max-width: 100%;
overflow: hidden;
background-image: url("https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
z-index: -1;
}

.site-dt{
background-color: #00d03e;
height: 573px;
width: 100%;
}


$(function()
{
var navStatesInPixelHeight = [65,90];

var changeNavState = function(nav, newStateIndex) {
nav.data('state', newStateIndex).stop().animate({
height : navStatesInPixelHeight[newStateIndex] + 'px'
}, 600);
};

var boolToStateIndex = function(bool) {
return bool * 1;
};

var maybeChangeNavState = function(nav, condState) {
var navState = nav.data('state');
if (navState === condState) {
changeNavState(nav, boolToStateIndex(!navState));
}
};

$('.top_nav').data('state', 1);

$(window).scroll(function(){
var $nav = $('.top_nav');

if ($(document).scrollTop() > 0) {
maybeChangeNavState($nav, 1);
} else {
maybeChangeNavState($nav, 0);
}
});
});

Answer

You need to add class .fixed-nav on .top_nav class when scrollTop() position is greater then 0 and simple remove added class in else statement and write CSS accordingly that class .fixed-class-name

Check jQuery code for Scroll

  $(window).scroll(function() {
    var $nav = $('.top_nav');
    var scrolTop = $(window).scrollTop();

    if (scrolTop > 0) {
      $nav.addClass("fixed-nav");
    } else {
      $nav.removeClass("fixed-nav");
    }
  });

$(function() {
  var navStatesInPixelHeight = [65, 90];

  var changeNavState = function(nav, newStateIndex) {
    nav.data('state', newStateIndex).stop().animate({
      height: navStatesInPixelHeight[newStateIndex] + 'px'
    }, 600);
  };

  var boolToStateIndex = function(bool) {
    return bool * 1;
  };

  var maybeChangeNavState = function(nav, condState) {
    var navState = nav.data('state');
    if (navState === condState) {
      changeNavState(nav, boolToStateIndex(!navState));
    }
  };

  $('.top_nav').data('state', 1);

  //Scroll Script here
  $(window).scroll(function() {
    var $nav = $('.top_nav');
    var scrolTop = $(window).scrollTop();

    if (scrolTop > 0) {
      $nav.addClass("fixed-nav");
    } else {
      $nav.removeClass("fixed-nav");
    }
  });

});
* {
  margin: 0;
  padding: 0;
}
/* Top Menu Start Here */

.top_nav {
  width: 100%;
  background: rgba(0, 0, 0, .5);
  position: relative;
  transition:all 0.7s ease;
  -webkit-transition:all 0.7s ease;
  -moz-transition:all 0.7s ease;
  -o-transition:all 0.7s ease;
  -ms-transition:all 0.7s ease;
}
.top_nav .logo {
  margin-top: 2px;
  margin-left: 20px;
  height: 75px;
  width: 200px;
  float: left;
  transition:all 0.7s ease;
  -webkit-transition:all 0.7s ease;
  -moz-transition:all 0.7s ease;
  -o-transition:all 0.7s ease;
  -ms-transition:all 0.7s ease;
}
.contact_details {
  background: yellow;
  margin-top: 5px;
  width: 230px;
  float: right;
  color: #fff;
  transition:all 0.7s ease;
  -webkit-transition:all 0.7s ease;
  -moz-transition:all 0.7s ease;
  -o-transition:all 0.7s ease;
  -ms-transition:all 0.7s ease;
}
.contact_details p {
  font-size: 14px;
  text-align: center;
}
.contact_details p a {
  text-decoration: none;
  color: #fff;
}
.nav_bar {
  width: 500px;
  float: right;
  background: orange;
}
.nav_bar ul {
  list-style-type: none;
}
.nav_bar ul li {
  display: inline-block;
  text-align: center;
  float: left;
}
.nav_bar ul li a {
  text-decoration: none;
  padding: 12px;
  margin: 8px;
  font-size: 20px;
  color: #fff;
  position: relative;
}
.nav_bar ul li a::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 0px;
  height: 5px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #ff6600;
  transition: width .4s;
}
.nav_bar ul li a:hover::after {
  width: 100%;
}
.container {
  height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-image: url("https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
  z-index: -1;
}
.site-dt {
  background-color: #00d03e;
  height: 573px;
  width: 100%;
}
/*Style after scroll*/

.fixed-nav {
  position: fixed;
  top: 0px
}
.fixed-nav .logo {
  height: 45px;
  width: 127px;
}
.fixed-nav .logo img {
  width: 100%
}
.fixed-nav .contact_details {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <div class="top_nav">
    <div class="logo">
      <a id="site-logo" href="#">
        <img src="http://www.robinwhale.co.uk/pages/wisdom/sigs_files/google-logo.jpg" alt="LOGO">
      </a>
    </div>
    <div class="contact_details">
      <p>Need Help, Call: 062 445676654 |<a href="#"> Mail</a>
      </p>
    </div>
    <div class="nav_bar">
      <ul>
        <li><a href="#">Services</a>
        </li>
        <li><a href="#">Solution</a>
        </li>
        <li><a href="#">Support</a>
        </li>
        <li><a href="#">Partners</a>
        </li>
        <li><a href="#">Contacts</a>
        </li>
      </ul>
    </div>
  </div>
</header>
<div class="container">
</div>
<div class="site-dt">

</div>

Hope it's relevant for you :)