Fixed navbar after second Section

Asked

Viewed 63 times

0

The code is breaking here in stackflow, but anyway, I’m trying to make the navbar scroll with the page until the beginning of the second section where it gets fixed, but I’m not getting, even if in the example below is half broken, the problem of the bar on the site is the same, is not making it appear fixed at the top.

http://johnsburger.com.br/wxsite31/johnsburger/

var isFixed = false;

$(document).on("scroll", function() {
  var navbar = $(".navbar");
  var heroSectionHeight = $(".fullscreen").height();

  // Set fixed
  if ($(window).scrollTop() >= heroSectionHeight && !isFixed) {
    isFixed = true;
    navbar.hide().addClass(".navbar-fixed-top").slideDown(375);
  }

  // Set static
  if ($(window).scrollTop() < heroSectionHeight && isFixed) {
    isFixed = false;
    navbar.slideUp(375, function() {
      navbar.removeClass(".navbar-fixed-top").show();
    });
  }
});
@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css';
@import 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
@import 'https://fonts.googleapis.com/css?family=Lato';

.navbar {
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.navbar a:focus {
  outline: 0;
}

.navbar .navbar-nav {
  letter-spacing: 1px;
  margin: 4px -100px 0 63px;
  font-size: 13px;
  max-width: 100%;
  text-align: center;
}

.navbar .navbar-nav li a:focus {
  outline: 0;
}

.navbar-fixed-top {
  z-index: 99999;
}

.navbar-default .navbar-nav>li>a {
  font-family: 'Lato', sans-serif;
  color: #000;
  font-size: 1.8rem;
  font-weight: 500;
  z-index: 999999;
}

.navbar-nav>li>a {
  padding-top: 19.5px;
  padding-bottom: 19.5px;
  /*-webkit-transition: 0.1s; /* Safari */
  transition: 0.1s;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  border-bottom: 2px solid #000;
  padding-bottom: 22px;
}

.navbar-default {
  background-color: #FFBA53;
  margin-bottom: 0;
}

.static-nav {
  position: static;
}

.fixed-nav {
  position: fixed;
}

.navbar-default,
.navbar-inverse {
  border: 0;
  height: 70px;
}

.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
  margin-left: 0px;
}

.navbar-default .navbar-brand {
  color: #0d33b9;
  padding: 15px 0;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #811b9a;
  background-color: transparent;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #FFF;
  background-color: #1A242F;
}

.navbar-default .navbar-toggle {
  border-color: #FFF;
  color: #FFF;
}

section {
  padding: 120px 0;
}

section h2 {
  margin: 0;
  font-size: 2.4rem;
}

@media(max-width:767px) {
  section {
    padding: 75px 0;
  }
}

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

.space {
  padding-right: 8px;
  margin-bottom: 3px;
  width: 27px;
  height: 17px;
}

#navcontainer .container {
  padding-left: 0;
}

.underline:hover {
  border-bottom: 3px solid #000;
}

#introduction p {
  color: #4C4C4C;
  position: relative;
  left: 65px;
  font-size: 1.4rem;
}

.infos {
  position: relative;
  padding-top: 55px;
  font-family: 'Lato', sans-serif;
  font-size: 1.6rem;
  text-align: right;
}

.subtitlea {
  position: relative;
  top: 3px;
  font-weight: bold;
  font-size: 1.6rem;
}

.subtitleb {
  position: relative;
  top: 3px;
  font-weight: bold;
  font-size: 1.6rem;
}

.subtitlec {
  position: relative;
  top: 3px;
  font-weight: bold;
  font-size: 1.6rem;
}

.titlea {
  font-family: 'Lato', sans-serif;
  color: #4C4C4C;
  font-size: 1.4rem;
}

.titleb {
  font-family: 'Lato', sans-serif;
  color: #4C4C4C;
  font-size: 1.4rem;
}

.titlec {
  font-family: 'Lato', sans-serif;
  color: #4C4C4C;
  font-size: 1.4rem;
}

#banner {
  padding: 25px 0;
}

#owl-demo .item img {
  display: block;
  width: 100%;
  height: auto;
}

.owl-dots {
  position: relative;
  float: left;
  bottom: 44px;
  margin-left: 15px;
}

.owl-theme .owl-dots .owl-dot span {
  width: 2.4rem;
  height: 2.4rem;
  margin: 5px 5px;
}

.title2 {
  font-family: 'Lato', sans-serif;
  font-size: 24px;
  font-weight: 800;
}

.btn {
  background-color: #fff;
  font-weight: bold;
  margin: 1.7rem -7.0rem 0 0;
  float: right;
  width: 140px;
  height: 42px;
  text-transform: uppercase;
  border-radius: 15px;
}

#introduction {
  background-image: url(http://johnsburger.com.br/wxsite31/johnsburger/img/capa.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  /* width: 100%; */
  max-width: 100%;
  display: block;
  padding-bottom: 35px;
  margin-top: 0;
}

.blurbox {
  background-image: url("http://johnsburger.com.br/wxsite31/johnsburger/img/");
  position: relative;
  background-color: #ffffffa3;
  width: 100%;
  height: 220px;
  padding-bottom: 13px;
}

#introduction img {
  float: left;
  width: 220px;
}

#introduction h1 {
  font-weight: 800;
  font-size: 30px;
  position: relative;
  left: 65px;
}

.sub {
  font-size: 1.5rem;
  position: relative;
  width: 100%;
  font-weight: 500;
  max-width: 100%;
  margin-top: 9px;
  letter-spacing: 0.3px;
  color: #4C4C4C;
}

.box-info {
  padding-right: 73px;
  padding-top: 65px;
}

.informaçao {
  float: right;
  margin-right: 54px;
}

.item {
  width: 960px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="fullscreen">
  <nav class="navbar navbar-default">
    <div id="navcontainer">
      <div class="container">
        <div class="col-md-11 col-md-offset-1">
          <div class="navbar-header page-scroll">
            <!-- Toggle Button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnav-navbar-collapse">
								MENU <span class="fa fa-bars color-white"></span>
							</button>
            <!-- Logo -->
            <a class="navbar-brand" href="#introduction"></a><img class="svg1" src="http://johnsburger.com.br/wxsite31/johnsburger/img/logo.svg"></a>
          </div>
          <!-- Navigation Links -->
          <div class="collapse navbar-collapse" id="mainnav-navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="underline page-scroll">
                <a href="#burger">Burgers</a>
              </li>
              <li class="underline page-scroll">
                <a href="#acompanhamentos">Acompanhamentos</a>
              </li>
              <li class="underline page-scroll">
                <a href="#bebidas">Bebidas</a>
              </li>
              <li class="underline page-scroll">
                <a href="#sobremesas">Sobremesas</a>
              </li>
            </ul>
            <div class="col-md-1 col-md-offset-2">
              <button type="button" class="btn trigger btn-light"><img class="space" src="img/profile.png"> Login</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>

</div>
<section id="introduction" class="fullscreen">

  <div class="blurbox">
    <div class="container">
      <div class="row">
        <div class="col-md-offset-1">
          <img class="img-responsive" src="http://johnsburger.com.br/wxsite31/johnsburger/img/logog.png">

        </div>
        <div class="col-md-offset-2">
          <h1>JOHN'S BURGER DELIVERY</h1>
          <p class="pmobile">Rua Hermógenes Prazeres, 371 - Centro - Biguaçu / SC</p>
          <div class="row">
            <div class="box-info">
              <div class="informaçao">
                <span class="titlec">Atendimento:</span><br/>
                <span class="subtitlec">18h30 às 23h30</span>
                <h4 class="h4mobile">ABERTO ATÉ AS 23h30</h4>
              </div>


              <div class="informaçao">
                <span class="titleb">Taxa de entrega:</span><br/>
                <span class="subtitleb">A partir de R$ 0,00</span>
              </div>

              <div class="informaçao">
                <span class="titlea">Tempo de entrega:</span><br/>
                <span class="subtitlea">35 a 40 minutos</span>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="banner">
  <div class="container">
    <div class="row">
      <div class="col-md-11 col-md-offset-1">
        <div id="owl-demo" class="owl-carousel owl-theme">

          <div class="item"><img class="img-responsive" src="http://johnsburger.com.br/wxsite31/johnsburger/img/banner.png"></div>
          <div class="item"><img class="img-responsive" src="http://johnsburger.com.br/wxsite31/johnsburger/img/banner2.png"></div>
          <div class="item"><img class="img-responsive" src="http://johnsburger.com.br/wxsite31/johnsburger/img/banner3.png"></div>
        </div>
      </div>
    </div>
  </div>
</section>

jquery css3

  • Dude I didn’t get it right, you want the bar to disappear by scrolling through the session 1 in which it reappears and stay fixed from session 2 is this?

  • Exactly, it will never be fixed at the first Section, only from the second

1 answer

0

Okay, I checked the situation here quickly on the link provided and already see a problem. You need to update the z-index of your fixed navbar, otherwise it will be below the content of the site.

Your javascript code is also not working correctly. When scroll occurs, it attempts to modify the Nav class, but to no avail, and soon returns to the static pattern.

  • Thanks, and how could solve this scroll problem that does not apply to class?

  • @Edustadler, you need to develop your Javascript code so there are no flaws. Unfortunately I can’t help you much with this issue

Browser other questions tagged jquery css3

You are not signed in. Login or sign up in order to post.