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>
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?
– hugocsl
Exactly, it will never be fixed at the first Section, only from the second
– Edu Stadler