Jump to content

Recommended Posts

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.

 

 

Share this post


Link to post
Share on other sites
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));

 

Share this post


Link to post
Share on other sites

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>

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Felper
      É possível fazer uma imagem .png mover-se por uma tela de Canvas (esquerda, direita, cima, baixo)? Poderiam mostrar um exemplo caso seja possível. É que estou tentando fazer um jogo, onde o jogador se move em um labirinto. O jogador seria uma imagem. Agradeço desde já!
    • By violin101
      Olá amigos, saudações...
       
      Feliz 2022 para todos nós.
       
      Amigos estou com um problema de Slider, o sistema começa o Carousel de depois de algum tempo o Slider para, mesmo colocando com LOOP infinito.
       
      Alguém por favor, poderia me ajudar a entender onde está o problema e como consigo resolver ?
       
      O JS está assim:
      $(".slider-active").owlCarousel({ loop: true, margin: 0, nav: true, autoplay: true, infinite: true, items: 1, autoplayTimeout: 10000, navText: ["<i class='fa fa-caret-left'></i>", "<i class='fa fa-caret-right'></i>"], dots: true, autoHeight: true, lazyLoad: true });  
       
      Grato,
       
      Cesar
    • By Jack Oliveira
      Ola pessoal tarde ou boa noite 
       
      É o seguinte tenho mais de 10 mil registro no banco de dados, no DATATABLE esta demorando um pouco para fazer o carregamento destas informações
      o tempo varia entre 16 á 20, 25 segundos para obter uma resposta.
       
      Queria que esta resposta pudessem ser mais rápida, se teria como claro ela ser mais rápida possível...
       
      Fiz um novo teste quantidade de arquivos 1mil arquivos a resposta é bem rapida não demora nem 3 segundo 
       
      Estou usando via ajax e json
       
      <script type="text/javascript"> $(function () { $("#DataTableAjaxDT").DataTable({ "pageLength": 20, "paging": true, "lengthChange": true, "ajax": "ajax/registros.php", "searching": true, "aLengthMenu": [ [5, 10, 15, 20, 25, 30, 35, -1], [5, 10, 15, 20, 25, 30, 35, "Todos"] ], "ordering": true, "info": true, "autoWidth": true, "columnDefs": [{ "targets": 'no-sort', "orderable": false, }], "language": { "sEmptyTable": "Nenhum registro encontrado", "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando 0 até 0 de 0 registros", "sInfoFiltered": "(Filtrados de _MAX_ registros)", "sInfoPostFix": "", "sInfoThousands": ".", "sLengthMenu": "Mostrar _MENU_ resultados por página", "sLoadingRecords": "Carregando...", "sProcessing": "Processando...", "sZeroRecords": "Nenhum registro encontrado", "sSearch": "Pesquisar", "oPaginate": { "sNext": "Próximo", "sPrevious": "Anterior", "sFirst": "Primeiro", "sLast": "Último" }, "oAria": { "sSortAscending": ": Ordenar colunas de forma ascendente", "sSortDescending": ": Ordenar colunas de forma descendente" } } }); }); </script>  
       
       
       
    • By Jack Oliveira
      Ola pessoal boa tarde preciso de um favor de vocês se assim for possível!!
       
      Seguinte  tenho uma página que ela esta em apenas em HTML porem preciso pegar umas informações do banco de dados e não sabendo como trazer os
      dados das tabelas para esta página canais.html, talvez sej ate simples em fazer isso. Mais eu não estou sabendo de como trazer estas informações ai
       
      OBS: esta página de html precisa manter da forma que esta o codigo ai apenas usar uma forma de usar as informações nela 
      bom espero que tenha entendo o que preciso aqui...
       
      segue o código 
       
      Pagina canais.html
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="language" content="pt-BR"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="{{ favicon }}"> {{ google_analytics }} <title>{{ title }}</title> <link rel="canonical" href="{{ url }}"> <meta name="description" content="{{ description }}"> <meta property="og:site_name" content="{{ site_name }}"> <meta property="og:title" content="{{ title }}"> <meta property="og:type" content="Website"> <meta property="og:url" content="{{ url }}"> <meta property="og:description" content="{{ description }}"> <meta property="og:image" content="{{ image }}"> <meta name="twitter:title" content="{{ title }}"> <meta name="twitter:url" content="{{ url }}"> <meta name="twitter:description" content="{{ description }}"> <meta name="twitter:site" content="{{ app_url }}"> <meta name="twitter:image" content="{{ image }}"> <meta itemprop="title" content="{{ title }}"> <meta itemprop="name" content="{{ name }}"> <meta itemprop="url" content="{{ url }}"> <meta itemprop="description" content="{{ description }}"> <meta itemprop="image" content="{{ image }}"> <meta property="fb:app_id" content="{{ fb_app_id }}"> <meta name="og:image:width" content="590"> <meta name="og:image:height" content="auto"> <link rel="stylesheet" href="{{ url }}assets/css/app_style.css"> <link rel="stylesheet" href="{{ url }}assets/style.css"> <!-- Pensei em chamar atraves de um script --> <script type="application/javascript" src="{{ url }}assets/js/script.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> #container-wrapper-1 {background-size:cover;background-position:left top;background-image : url('images/{{ bg2 }}?v=1gr61cu');} #container-wrapper-2 {background-size:cover;background-position:left top;background-image : url('images/{{ bg3 }}?v=1gr61cu');} #container-wrapper-3 {background-size:cover;background-position:center top;background-image : url('images/{{ bg4 }}?v=1gr673m');} div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: white no-repeat center center; } .btn-800 { background-color: {{ background_color1 }}; border-color: {{ border_color1 }}; color: {{ color1 }}; font-size:25px!important; margin: 10px; } .btn-800:hover { color: {{ color2 }}; background-color: {{ background_color2 }}; border-color: {{ border_color2 }}; margin: 10px; } .solucion { background-color: {{ background_color }}; border-color: {{ border_color }}; color: {{ color }}; width: 236px; font-size:25px!important; margin: 10px; display: block; text-align: center; } .solucion:hover { color: #fff; background-color: {{ background_color }}; border-color: {{ border_color }}; width: 236px; margin: 10px; display: block; text-align: center; } </style> </head> <body> <div class="card"> <div class="card-header white"> <strong> {{ titulo_informacao }} </strong> <p> {{ resumo }} </p> </div> <p style="text-align: center; line-height: 2.05;"> <span style="font-size: 20px;">{{ canais }}</span> </p> <p style="text-align: center; line-height: 2.05;"> <strong> <span style="font-size: 30px;">{{ play }}</span> </strong> </p> </div> </body> </html> Então seria isso ai, 
      só mais uma obs: toda vez que ser inserido ou atualizado os dados no banco que as informações seja atualizada tbm...
       
       
      Desde de já fico no aguardo
       
    • By AndersonWS
      Olá a todos, preciso de uma ajuda com uma expressão regular. Quase deu certo porém  me falta achar todas as partes, creio que seja só um ajuste na minha expressão regular.
      $string = CONTRATANTE: {{ Nome do Contratante }} , {{ Nacionalidade Contratante }} , {{ Estado Civil Contratante }} , {{ Profissão Contratante }} , Carteira de Identidade nº {{ Identidade Contratante }} , C.P.F. nº {{ CPF Contratante }} , residente e domiciliado na {{ Logradouro Contratante }} , nº {{ Numero Logradouro Contratante }} , bairro {{ Bairro Contratante }} , Cep {{ CEP Contratante }} , Cidade {{ Cidade Contratante }} , no Estado {{ UF Contratante }}"; $arr = $string; $i=1; preg_match_all("#\{{[\w\s']+\}}#i", $arr, $txt); foreach($txt AS $key => $val){ foreach($val AS $k => $v){ echo $i.'- '.$v.'<br/>'; $i++; } } O resultado esperado vem com alguns itens faltando:
      1- {{ Nome do Contratante }} {{ Nome do Contratante }} 2- ??? {{ Nacionalidade Contratante }} 3- {{ Estado Civil Contratante }} {{ Estado Civil Contratante }} 4- ??? {{ Profissão Contratante }} 5- {{ Identidade Contratante }} {{ Identidade Contratante }} 6- {{ CPF Contratante }} {{ CPF Contratante }} 7- ??? {{ Logradouro Contratante }} 8- {{ Numero Logradouro Contratante }} {{ Numero Logradouro Contratante }} 9- {{ Bairro Contratante }} {{ Bairro Contratante }} 10- {{ CEP Contratante }} {{ CEP Contratante }} 11- {{ Cidade Contratante }} {{ Cidade Contratante }} 12- ??? {{ UF Contratante }}  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.