adcionar classe

[d4v1 0]

Olá, estou precisando de uma ajuda com JS, estou seguindo um modelo que a Origamid fez, que alias e muito bom, mas estou querendo adaptar para adcionar mais classe ao invés de só uma como esta, tenho pouquíssimo conhecimento em JS, o objetivo disso é trocar as classes quando usar o scrool e remover a classe quando voltar a topo, eu estou querendo adicionar outra classe também ao "<dv1>" e "<dv2>" que no meu caso será dois menus que eu tenho, segue o código.

 

 

[Ted k' 126]

.addClass('test1 test2 test3');

 

[d4v1 0]

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;
}
dv1{
	background-color: red;
}

dv2{
	background-color:blue;
}
nvclasse1{
	background-color:green;
}
dv2.nvclasse2{
	background-color:#E90F40
}

/* 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));

 

[d4v1 0]

ninguém?! 

[Omar~ 87]

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
}
#primeira, #segunda {
    width: 40%;
    padding: 27px;
    font-size: 20px;
    font-family: sans-serif;
    display: inline-block
}
.cor-verde {color: green}
.cor-amarela {color: yellow}


.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>

 

 

[Omar~ 87]

duplicou