CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
WillKre
WillKre

Reputation: 6158

Add transition to centered navbar icon/logo/image on scrolldown

I've made a simple Navbar that's fixed to the top. Originally when at the top, I would like the logo to be slightly larger, then on scroll down make it transition itself into the navbar.

When scrolling back to the top I would like the logo to come back out.

Any help or tips greatly appreciated!

Not scrolled

Scrolled down

Here's a codepen of what I have so far; the logo is oval shaped so I used batman as an example:

http://codepen.io/anon/pen/NRzWXk

HTML:

<nav>
  <div id="nav_wrapper">
    <ul>
      <li><a href="#">One</a>
      </li>
      <li><a href="#">Two</a>
      </li>
      <li><a href="#">Three</a>
      </li>
      <li><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
      </li>
      <li><a href="#">Four</a>
      </li>
      <li><a href="#">Five</a>
      </li>
      <li><a href="#">Six</a></li>
    </ul>
  </div>
</nav>

CSS: 

html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #d7d2c4;
}

nav {
    background-color: #704e46;
    top: 0;
    position: fixed;
    width: 100%;

}

#nav_wrapper {
    text-align: center;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style-type: none;
    display: inline-block;
    padding: 15px;
    -webkit-transition: background-color 0.5s; /* Safari */
    transition: background-color 0.5s;
}

nav ul li a {
    text-decoration: none;
    color: white;
    -webkit-transition: background-color 0.5s; /* Safari */
    transition: background-color 0.5s;
}

nav ul li:hover {
    background-color: #5d4037;
    cursor: pointer;
}

nav ul li:hover a{
    color: whitesmoke;   
}

Upvotes: 1

Views: 1850

Answers (4)

bnned
bnned

Reputation: 23

Heres my take on it. Used jQuery for the toggling of the class:
http://codepen.io/banned/pen/GoEvEY

HTML: 

<html>
<head>
    <title> Camping Santa Lucia </title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <nav>
        <div id="nav_wrapper">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
             </ul>
              <a class="image" href="#"></a>
             <ul>
                <li><a href="#">Four</a></li>
                <li><a href="#">Five</a></li>
                <li><a href="#">Six</a></li>
            </ul>
        </div>
    </nav>


</body>
</html>

html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #d7d2c4;
    height: 800px;
}

nav {
    background-color: #704e46;
    position: fixed;
    width: 100%;

}

#nav_wrapper {
    width: 100%;
    text-align: center;
    display: block;
}

nav ul {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 0;

}

nav ul li {
    list-style-type: none;
    display: inline;
    padding: 15px;

    -webkit-transition: background-color 0.5s; /* Safari */
    transition: background-color 0.5s;
}

Css:

nav ul li a {
    text-decoration: none;
    color: white;
    -webkit-transition: background-color 0.5s; /* Safari */
    transition: background-color 0.5s;
}

nav ul li:hover {
    background-color: #5d4037;
    cursor: pointer;
}

nav ul li:hover a{
    color: whitesmoke;   
}

.image {
  height: 50px;
  width: 80px;
  background: url("http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908") no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
  transition: 0.5s;
  transform: scale(2);
  margin: 30px 30px 0px;

}

.image.scrolled {
  transition: 0.5s;
  transform: scale(1);
  margin: 0 10px;
}

jQuery:

$(window).scroll(function() {
    if ($(window).scrollTop() > 70) {
      if (!$(".image").hasClass("scrolled")) {
        $(".image").toggleClass("scrolled");
      }
    } else if ($(window).scrollTop() < 70) {
      if ($(".image").hasClass("scrolled")) {
        $(".image").toggleClass("scrolled");
      }
    }
});

Upvotes: 0

robhoomph
robhoomph

Reputation: 45

try the jquery scroll() method

$("window").scroll(function() {
$("logo").animate(params);});

for params put in what 2d tranform you want like scale(2,3) etc.

Upvotes: 0

Jinu Kurian
Jinu Kurian

Reputation: 9416

Hope you are looking for something like this 

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

     //>=, not <=
    if (scroll >= 300) {
        //clearHeader, not clearheader - caps H
        $("#nav_wrapper").addClass("scrolled");
    }
  else{
    $("#nav_wrapper").removeClass("scrolled");
  }
});
html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #d7d2c4;
    height: 1000px;
}

nav {
    background-color: #704e46;
    top: 0;
    position: fixed;
    width: 100%;

}

#nav_wrapper {
    text-align: center;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style-type: none;
    display: inline-block;
    padding: 15px;
    -webkit-transition: background-color 0.5s; /* Safari */
    transition: background-color 0.5s;
}

nav ul li a {
    text-decoration: none;
    color: white;
    -webkit-transition: background-color 0.5s; /* Safari */
    transition: background-color 0.5s;
}

nav ul li:hover {
    background-color: #5d4037;
    cursor: pointer;
}

nav ul li:hover a{
    color: whitesmoke;   
}
.logo {
  padding: 50px;
  transition: all ease-in .25s;
  margin-bottom: -30px
}
.logo img{
  transform : scale(3);
  transition: all ease-in .25s;
}
.scrolled .logo{
  padding: 15px;
}
.scrolled .logo img{
  transform : scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title> Camping Santa Lucia </title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <nav>
        <div id="nav_wrapper">
            <ul>
                <li><a href="#">One</a>
                </li><li><a href="#">Two</a>
                </li><li><a href="#">Three</a>
                </li><li class="logo"><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
                </li><li><a href="#">Four</a>
                </li><li><a href="#">Five</a>
                </li><li><a href="#">Six</a></li>
            </ul>
        </div>
    </nav>


</body>
</html>

Upvotes: 0

Screech129
Screech129

Reputation: 110

I'm not sure how to do it with pure CSS but since you tagged JQuery I'm going to go with that. The updated codepen is here: http://codepen.io/anon/pen/QyggBJ

Basically you add a position of absolute to your image and place it in the center. Then use jquery to detect scrolling and change position between static and absolute. CSS:

img{
  position:absolute;
  right:48%;
}

Jquery:

$(window).scroll(function (e){
  var scrollTop = $('body').scrollTop();
  var topDistance = $('#nav_wrapper').offset().top;
if (topDistance == 0) {
            $('img').css('position','absolute');
        }else{
           $('img').css('position','static');
        }
});

Upvotes: 0

Related Questions