adcionar classe

.addClass('test1 test2 test3');

>

Em 02/04/2018 at 15:26, Ted k' disse:

.addClass('test1 test2 test3');

  

	certo, a dificuldade que estou tendo e na hora de selecionar a navegação :

	não estou sabendo como fazer :

	var $nav $dv1 = $('nav' 'dv1'),

	            navHeight = $nav.outerHeight(),

	            windowTop = $(this).scrollTop();

	ou assim :

	var $nav,dv1 = $('nav' 'dv1'),

	            navHeight = $nav.outerHeight(),

	            windowTop = $(this).scrollTop();

	ou assim:

	var $nav dv1 = $('nav' 'dv1'),

	            navHeight = $nav.outerHeight(),

	            windowTop = $(this).scrollTop();

	dessas maneiras nem uma deu certo, pois preciso que quando for trocar a classe, troque a classe que o dv1 e dv2 tenha.

	$nav.addClass('small'),          

	$dv1.addClass('nvclasse1');

<nav>
	<dv1>menu 1</dv1>
	<dv2>menu 2</dv2>
	<ul>
 <li><a href="#">Sobre</a></li>
 <li><a href="#">Produtos</a></li>
 <li><a href="#">Contato</a></li>
	</ul>
</nav>

<section>
	<h1>Section #1</h1>
	<p>Todas estas questões, devidamente ponderadas, levantam dúvidas sobre se o desenvolvimento contínuo de distintas formas de atuação exige a precisão e a definição do investimento em reciclagem técnica.</p>
</section>

<section>
	<h1>Section #2</h1>
	<p>Todas estas questões, devidamente ponderadas, levantam dúvidas sobre se o desenvolvimento contínuo de distintas formas de atuação exige a precisão e a definição do investimento em reciclagem técnica.</p>
</section>

<section>
	<h1>Section #3</h1>
	<p>Todas estas questões, devidamente ponderadas, levantam dúvidas sobre se o desenvolvimento contínuo de distintas formas de atuação exige a precisão e a definição do investimento em reciclagem técnica.</p>
</section>

<section>
	<h1>Section #4</h1>
	<p>Todas estas questões, devidamente ponderadas, levantam dúvidas sobre se o desenvolvimento contínuo de distintas formas de atuação exige a precisão e a definição do investimento em reciclagem técnica.</p>
</section>

<section>
	<h1>Section #5</h1>
	<p>Todas estas questões, devidamente ponderadas, levantam dúvidas sobre se o desenvolvimento contínuo de distintas formas de atuação exige a precisão e a definição do investimento em reciclagem técnica.</p>
</section>

<section>
	<h1>Section #6</h1>
	<p>Todas estas questões, devidamente ponderadas, levantam dúvidas sobre se o desenvolvimento contínuo de distintas formas de atuação exige a precisão e a definição do investimento em reciclagem técnica.</p>
</section>

nav {

	position: fixed;
	top: 0px;
	width: 100%;
	padding: 30px;
	font-family: monospace;
	background: #2E69C9;
	transition: .3s;
}

	background-color: red;
}

dv2{

	background-color:blue;
}

	background-color:green;
}

/ A classe small é adicionada a barra de navegação, diminuindo o padding e o font-size geral dela. Mas você pode adicionar qualquer estilo que quiser. /
nav.small {

	padding: 5px;
	font-size: 80%;
}

* {

	box-sizing: border-box;
}

body {

	padding-top: 60px;
}

a {

	text-decoration: none;
}

nav > a {

	font-size: 2em;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #15335E;
}

ul {

	float: right;
}

li {

	display: inline-block;
}

li > a {

	color: white;
	font-size: 1.4em;
	padding: 5px 20px;
	display: block;
	text-transform: uppercase;
}

section {

	max-width: 500px;
	margin: 60px auto;
}

section h1 {

	color: #E90F40;
	font-size: 4em;
	margin-bottom: 20px;
}

section p {

	font-family: monospace;
	font-size: 1.4em;
	line-height: 1.5;
}

// Ativa a função toda vez que o usuário utilizar o scroll
// Usa o debounce da biblioteca lodash, para evitar excessivos disparos da função ao scroll. Assim a função só vai disparar a cada 200ms, o tempo é informado ao final da função.

$(window).on('scroll', _.debounce(function() {

	// Seleciona a navegação
	// Identifica o tamanho total do menu
	// Verifica a distância entre o scroll e o topo
	var $nav $dv1 = $('nav' 'dv1'),
 navHeight = $nav.outerHeight(),
 windowTop = $(this).scrollTop();

	// Verifica quando a distância do scroll for maior que o tamanho total do menu
	if (windowTop > navHeight) {
 // Adiciona a classe small ao menu
 $nav.addClass('small'),
 $dv1.addClass('nvclasse1');

 // Modifica o nome inteiro da empresa para uma sigla apenas
 //$('nav > a').text('TC');
	} else {
 // Remove a classe small do menu
 $nav.removeClass('small');
 $dv1.removeClass('nvclasse1');
 // Coloca o nome inteiro da empresa novamente
 //$('nav > a').text('The Company');
	}
}, 200));

ninguém?!

Serve isso, não sei se é o que deseja realmente, e usei javascript ao invés de jquery.

No entanto pelo que disse eu só criei um exemplo que ao realizar scroll na página altero a div class de uns elementos.

Spoiler

<style>
#MinhaDivID {
 position: absolute;
 top: 60px;
 left: 0;
 height: 80px;
 width: 100%;
 color: white;
 background: black
}
.azul {
 background: blue
}
.vermelho {
 background: red
}

 width: 40%;
 padding: 27px;
 font-size: 20px;
 font-family: sans-serif;
 display: inline-block
}

.caixa_de_rolagem {
 height: 1000px
}
</style>

<script>
window.addEventListener('scroll', function () {
 var elementoA = document.getElementById('MinhaDivID');
 var elementoB = document.getElementById('primeira');
 var elementoC = document.getElementById('segunda');

 if (document.body.scrollTop > 60) { // a altura de 60px do elemento em questão
 elementoA.setAttribute('style', 'position:fixed; top:0');
 elementoB.className = 'vermelho cor-verde'; // Pegamos o elemento que queremos e alteramos sua propiedade class do jeito que quisermos
 elementoC.className = 'vermelho cor-verde';
 } else {
 elementoA.setAttribute('style', 'position:absolute; top:60px');
 elementoB.className = 'azul cor-amarela';
 elementoC.className = 'azul cor-amarela';
 }
});
</script>

<div id="MinhaDivID">
 <div id="primeira">PRIMEIRA</div>
 <div id="segunda">SEGUNDA</div>
</div>

<div class="caixa_de_rolagem"></div>

duplicou