Fullpage.js + Affix.js

Asked

Viewed 34 times

0

Good, I’m having trouble running 2 plugins in harmony. fullpage and affix.

Follow examples below of how this and how I wanted it to stay.

Isso é a home com o menu transparente

Essa é a segunda section tbm com menu transparente

Isso é como deveria ficar e como eu quero que fique.

  1. The first image: This is the home with the transparent menu
  2. The second image: This is the second Section tbm with transparent menu
  3. The third image: This is how it should look and how I want it to look.

The attached Cod html and js I used.

/* 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>
<script type="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>

*Notice the difference in the menu

fullpage.js

  • What is your problem after all? The white color in the Menu or the image that is not loading and getting fullscreen? By the layout of the images nor need JS to do these things... What is the interference of one plugin in the other? Which error presents?

  • I don’t really understand the problem, please describe what you have tried and what happened, if possible with the console logs

  • I uploaded the site as fullpage and without fullpage, you will get an idea of what I want. http://estudiolephi.com/lephi/ http://estudiolephi.com/lephi2.0/

No answers

Browser other questions tagged fullpage.js

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