How to create a scrolling menu?

Question

How to create a scrolling menu?

Navigation

#1 by (4 votes)

4

How is this menu fixed at the top of the page that when the user scrolls down when arriving at a certain place on the page the menu decreases getting compact. And when you return the screen up, does the menu return to the initial stylization? Can this be done with the logo too?

Example taken from Website: link

TosetthemenuI'musing

position: fixed;

However, I do not know how this effect is being performed if it is Javascript or CSS.

Using the information you get here I can make the menu bar have an animation, however the animation only applies to the menus, but this is not what I want and the answers below proposed. I want to have this "animation" effect on my logo too. Could someone could help me?

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

body {
  padding-top: 50px;
}

nav a {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  font-size: 18px;
}

nav .navbar-toggle {
  margin: 13px 15px 13px 0;
}

.navbar-brand {
  font-size: 30px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}


}
nav.navbar.shrink {
  min-height: 35px;
}
nav.shrink a {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  font-size: 15px;
}
nav.shrink .navbar-brand {
  font-size: 25px;
}
nav.shrink .navbar-toggle {
  padding: 4px 5px;
  margin: 8px 15px 8px 0;
}
*Position logo*/ .navbar-brand img {
  padding: 10px 0;
}

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="https://d2z0lf9itclnw8.cloudfront.net/img/logo/[email protected]"width="250px" class="img-responsive" alt="">

    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

div class="jumbotron">
<div class="container">
  <h1>Hello, world!</h1>
  <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>

<div class="container">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
  </div>
  <!-- /.container -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

html jquery css

asked by anonymous 05.04.2017 / 19:32

1 answer

Grouping and Summing in Oracle Why does the size of the JFrame exceed the size of its ContentPane, even if it has a defined size?

score 4 · Accepted Answer

The way I usually do is to apply a class to the menu after scrolling. From the class is just stylize your elements the way you want. In this example I am sending, I only animated the max-height of the "menu" which in this case is just a bar. But I think it's pretty clear what's been done.

$(function() {
  //caches a jQuery object containing the header element
  var header = $(".menu");
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
      header.addClass("menuScroll");
    } else {
      header.removeClass("menuScroll");
    }
  });
});

body {
  margin: 0;
  height: 2000px;
}

.menu {
  position: fixed;
  width: 100%;
  height: 100px;
  max-height: 100px;
  background: black;
  -webkit-transition: max-height 0.2s ease-in-out;
  -moz-transition: max-height 0.2s ease-in-out;
  -o-transition: max-height 0.2s ease-in-out;
  transition: max-height 0.2s ease-in-out;
}

.menu.menuScroll {
  max-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="menu">

</div>