Fullpage.js + Affix.js

Question

Fullpage.js + Affix.js

Navigation

0

Well, I'm having difficulty running 2 plugins in harmony. The fullpage and affix.

Here are some examples of how this is and how I wanted it to be.

Thefirstimage:Thisisthehomewiththetransparentmenu

Thesecondimage:Thisisthesecondsectionalsowithtransparentmenu

Thethirdimage:ThisishowitshouldbeandhowIwantittobe.

ThehtmlcodandjsthatIusedareattached.

/* affix the navbar after scroll below header */
$('nav').affix({
      offset: {
		top: $('#section1').height()
      }
});

html,body {
	height:100%;
}

.home {
	background-size:cover;
	background-image: url('../img/BG.jpg');
}

.affix {
	background-color: #ffffff;
	-webkit-transition:padding 0.2s ease-out;
	-moz-transition:padding 0.2s ease-out;  
	-o-transition:padding 0.2s ease-out;         
	transition:padding 0.2s ease-out;
}

.affix a{
	color: #000 !important;
}

@media (max-width:767px){
	.secundary_logo {
		display: none !important;
	}
	.affix .secundary_logo {
		display: block !important;
	}
	.affix .first_logo {
		display: none !important;
	}
}

@media (min-width:768px) {
	.affix-top {
		/* navbar style at top */
		background-color:transparent;
		color: #1a1a21;
		border-color:transparent;
		-webkit-transition:all 0.5s ease;
		-moz-transition:all 0.5s ease; 
		-o-transition:all 0.5s ease;         
		transition:all 0.5s ease;  
    }
	.secundary_logo {
		display: none;
	}
	.affix .secundary_logo {
		display: block;
	}
	.affix .first_logo {
		display: none;
	}
}

nav .navbar-nav .nav-link,
nav .navbar-brand {
	color: #fff;
	
}

section {
  height: 100vh;
}

.quemsomos{
	background-color: #000 !important;
}

.nav-redes{
	border-left: 2px solid #fff;
}

.affix .nav-redes{
	border-left: 2px solid #000;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
  <link rel="stylesheet" href="css/javascript.fullPage.css" type="text/css">
  <link rel="stylesheet" href="css/jquery.fullPage.css" type="text/css">
  <link rel="stylesheet" href="css/default.css" type="text/css"></head>

<body>



<nav id="nav" class="navbar fixed-top navbar-expand-md d-block d-sm-block d-md-none" data-spy="affix">
	<div class="container">
		
	<a class="first_logo " href="#"><img height="84" alt="LEPHI" src="img\logo-1.png"></a>
		
	<a class="secundary_logo" href="#"><img height="84" alt="LEPHI" src="img\logo-2.png"></a>
		
	<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
		
		<div class="collapse navbar-collapse text-center justify-content-center" id="navbarSupportedContent">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a class="nav-link" href="#">QUEM SOMOS</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">SERVIÇOS</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">PROJETOS</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">CONTATO</a>
				</li>
			</ul>
		</div>
	</div>
</nav>

<nav id="nav1" style="padding: 0; !important" class="navbar fixed-top navbar-expand-md d-none d-sm-none d-md-block" data-spy="affix">
	<div class="container">
		<div class="collapse navbar-collapse text-center justify-content-center">
			<ul class="navbar-nav">
				<li data-menuanchor="secondPage" class="nav-item mx-1">
					<a class="nav-link" href="#firstPage">QUEM SOMOS</a>
				</li>
				<li data-menuanchor="3rdPage" class="nav-item mx-1">
					<a class="nav-link" href="#secondPage">SERVIÇOS</a>
				</li>
			</ul>

			<ul class="navbar-nav mx-4">
				<li data-menuanchor="firstPage"  class="nav-item">
					<a class="first_logo" href="#firstPage"><img height="80" alt="LEPHI" src="img\logo-1.png"></a>
					<a class="secundary_logo" href="#firstPage"><img height="80" alt="LEPHI" src="img\logo-2.png"></a>
				</li>
			</ul>

			<ul class="navbar-nav">
				<li data-menuanchor="4rdPage" class="nav-item mx-1">
					<a class="nav-link" href="#3rdPage">PROJETOS</a>
				</li>
				<li data-menuanchor="5rdPage" class="nav-item mx-1">
					<a class="nav-link" href="#4rdPage">CONTATO</a>
				</li>
			</ul>
			
			<ul class="navbar-nav py-4 ml-2 nav-redes">
				<li class="nav-item ml-3">
					<a class="first_logo" href="#"><img height="22" alt="LEPHI" src="img\facebook-1.png"></a>
					<a class="secundary_logo" href="#"><img height="22" alt="LEPHI" src="img\facebook-2.png"></a>
				</li>
				<li class="nav-item mx-3">
					<a class="first_logo" href="#"><img height="22" alt="LEPHI" src="img\instagram-1.png"></a>
					<a class="secundary_logo" href="#"><img height="22" alt="LEPHI" src="img\instagram-2.png"></a>
				</li>
			</ul>
		</div>
	</div>
</nav>
	
<div id="fullpage">
	
	<div class="section" id="section0">
	<section class="home">
	<div class="py-5 text-center">
		<div class="container py-5">
			<div class="row">
				<div class="col-md-12">
					<h1 class="display-3 mb-4 text-primary">Hero image intro</h1>
					<p class="lead mb-5">Pingendo is a HTML editor for everyone. Easy for newbies, useful for professionals.
					<br>Code quality is a must. Pingendo generates clean, battle-tested, modular Bootstrap 4 code. </p>
					<a href="#" class="btn btn-lg mx-1 btn-secondary">A claim here</a>
					<a href="#" class="btn btn-lg btn-primary mx-1">Your call to action</a>
				</div>
			</div>
		</div>
	</div>
	</section>
	</div>
	
	<div class="section" id="section1">
	<section class="quemsomos" id="quemsomos">
	<div class="py-5 text-center">
		<div class="container py-5">
			<div class="row">
				<div class="col-md-12">
					<h1 class="display-3 mb-4 text-primary">Hero image intro</h1>
					<p class="lead mb-5">Pingendo is a HTML editor for everyone. Easy for newbies, useful for professionals.
					<br>Code quality is a must. Pingendo generates clean, battle-tested, modular Bootstrap 4 code. </p>
					<a href="#" class="btn btn-lg mx-1 btn-secondary">A claim here</a>
					<a href="#" class="btn btn-lg btn-primary mx-1">Your call to action</a>
				</div>
			</div>
		</div>
	</div>
	</section>
	</div>
	
	<div class="section" id="section2">
	<section id="servicos">
	<div class="py-5 text-center">
		<div class="container py-5">
			<div class="row">
				<div class="col-md-12">
					<h1 class="display-3 mb-4 text-primary">Hero image intro</h1>
					<p class="lead mb-5">Pingendo is a HTML editor for everyone. Easy for newbies, useful for professionals.
					<br>Code quality is a must. Pingendo generates clean, battle-tested, modular Bootstrap 4 code. </p>
					<a href="#" class="btn btn-lg mx-1 btn-secondary">A claim here</a>
					<a href="#" class="btn btn-lg btn-primary mx-1">Your call to action</a>
				</div>
			</div>
		</div>
	</div>
	</section>
	</div>
	
</div>
	
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://rawgit.com/bassjobsen/affix/master/assets/js/affix.js"></script><scripttype="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/javascript.fullPage.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$('#fullpage').fullpage({
		anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage'],
		menu: '#nav1',
		navigation: true,
		navigationPosition: 'right',
		navigationTooltips: ['First page', 'Second page', '3rdPage', '4thpage', 'Fifth and last page'],
		easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
		responsiveWidth: 1100
	});
});
	
</script>
</body>

</html>

With fullpage.js - link
No fullpage.js - link

* Notice the difference in the menu

fullpage.js

asked by anonymous 07.03.2018 / 19:05

0 answers

Check interval between two dates View and modify items in the database with php