Navbar fixed after second section

Question

Navbar fixed after second section

Navigation

#1 by (0 votes)

0

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

link

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><scriptsrc="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><!--NavigationLinks--><divclass="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><divclass="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><divclass="item"><img class="img-responsive" src="http://johnsburger.com.br/wxsite31/johnsburger/img/banner2.png"></div><divclass="item"><img class="img-responsive" src="http://johnsburger.com.br/wxsite31/johnsburger/img/banner3.png"></div>
        </div>
      </div>
    </div>
  </div>
</section>

jquery css3

asked by anonymous 01.08.2018 / 14:23

1 answer

How do I get Device Serial on PHONEGAP? Generate an array from a query in mongoDB (Mongoose)

score 0 · Answer 1

Ok, I checked the situation here quickly on the provided link and I 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 not working properly either. When the scroll occurs, it tries to modify the nav class, but without success, and then returns to the static pattern.