Skocz do zawartości
t9omek

Menu zmieniające kolor w zależności od sekcji

Polecane posty

Witam, mam stronę parallax (przewijaną), która jest podzielona na 3 sekcje o różnych kolorach. Chciałbym żeby menu które przewija się wraz ze stroną zmieniało kolor w zależności od sekcji. Jak mógł bym to zrobić ?

Udostępnij ten post


Link to postu
Udostępnij na innych stronach


$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 500) {
$("body").addClass("pos500");
}
}); );


body.pos500 .menu{
background-color:red;
}

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Chciałbym żeby to działało innej zasadzie.Np użytkownik znajduję się w sekcji o id "companies" to menu miało by jakiś kolor jak w sekcji "individual" to inny.

Czyli if id =companies css=asd else css=dsa

Tylko nie wiem jak to ubrać w język programowania

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]>	   <html class="no-js" lang=""> <!--<![endif]-->
<html lang="en-US">


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Description">
  <title>Title</title>
  <!-- Bootstrap Core CSS -->
  <link href="assets/css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
  <!-- Retina.js - Load first for faster HQ mobile images. -->
  <script src="assets/js/plugins/retina/retina.min.js"></script>
  <!-- Font Awesome -->
  <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <!-- Default Fonts -->
  <link href='https://fonts.googleapis.com/css?family=Arvo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <!-- Plugin CSS -->
  <link href="assets/css/plugins/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css">
  <link href="assets/css/plugins/owl-carousel/owl.theme.css" rel="stylesheet" type="text/css">
  <link href="assets/css/plugins/owl-carousel/owl.transitions.css" rel="stylesheet" type="text/css">
  <link href="assets/css/plugins/magnific-popup.css" rel="stylesheet" type="text/css">
  <link href="assets/css/plugins/background.css" rel="stylesheet" type="text/css">
  <link href="assets/css/plugins/animate.css" rel="stylesheet" type="text/css">
  <!-- Custom CSS -->
  <link href="assets/css/custom.css" rel="stylesheet" type="text/css">
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body id="page-top">
  <!-- Navigation -->
  <nav class="navbar navbar-inverse navbar-fixed-top navbar-expanded navbar-custom">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll navbar-brand-centered" href="#page-top">
                    <img src="assets/img/logo_symbol.png" class="img-responsive" alt="">
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav navbar-nav-lang">
					<li><a href="#" class="page-scroll">Button 1</a></li>
					<li><a href="#" class="page-scroll">Button 2</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
                    <li class="hidden"><a class="page-scroll" href="#page-top"></a></li>
					<li class="companies_menu_bg"><a class="page-scroll" href="#companies">Companies</a></li>
					<li class="individual_menu_bg"><a class="page-scroll" href="#individual">Individual</a></li>
					<li class="about_menu_bg"><a class="page-scroll" href="#about">About</a></li>
					<!--<li class="thoughts_menu_bg"><a class="page-scroll" href="#thoughts">Thoughts</a></li>-->
					<li class="contact_menu_bg"><a class="page-scroll" href="#contact">Contact</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>
  <header>
    <div class="intro-content">
	<div class="row-lang">
		<div class="col-md-3 col-md-offset-3 col-xs-6">
			<a href="#" class="btn btn-outline-light btn-lg">Button 1</a>
		</div>
		<div class="col-md-3 col-xs-6">
			<a href="#" class="page-scroll btn btn-outline-light btn-lg">Button 2</a>
		</div>
	</div>
      <img src="assets/img/logo_main.png" class="img-responsive img-centered" alt="">
    </div>
    <div class="scroll-down page-scroll">
      <a class="btn page-scroll" href="#companies"><i class="fa fa-angle-down"></i></a>
    </div>
  </header>
	<section id="companies" class="bg-companies">
		<div class="container-fluid ">
			<div class="row text-center">
				<div class="col-lg-12 wow fadeIn animated" style="visibility: visible; animation-name: fadeIn;">
				  <h2>Lorem ipsum dolor sit amet</h2>
				  <hr class="colored">
				  <!-- Carousel
					================================================== -->
					<div id="myCarousel" class="carousel slide col-md-8 col-md-offset-2">        
						<div class="carousel-inner">           
							<div class="item active">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
							</div>
							<div class="item"> 
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>                                                         
							 </div>  
							<div class="item"> 
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>               
							</div>
							<div class="item"> 
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>                                                         
							 </div>  
							<div class="item"> 
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>               
							</div>  
						</div>
						 <!-- Indicators -->
						  <ol class="carousel-indicators">
							<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel" data-slide-to="1"></li>
							<li data-target="#myCarousel" data-slide-to="2"></li>
							<li data-target="#myCarousel" data-slide-to="3"></li>
							<li data-target="#myCarousel" data-slide-to="4"></li>
						  </ol>                                                                 
					</div><!-- End Carousel -->
				</div>
			</div>
			<div class=" row text-center companies-content-row" style="background-image: url('assets/img/bg8.jpg')">
				<div class="col-md-3 col-sm-6 wow fadeIn animated" data-wow-delay=".2s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeIn;">
					<div class="about-content">
						<i class="fa fa-gavel"></i>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 wow fadeIn animated" data-wow-delay=".4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeIn;">
					<div class="about-content">
						<i class="fa fa-shield"></i>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 wow fadeIn animated" data-wow-delay=".6s" style="visibility: visible; animation-delay: 0.8s; animation-name: fadeIn;">
					<div class="about-content">
						<i class="fa fa-life-ring"></i>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 wow fadeIn animated" data-wow-delay=".8s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeIn;">
					<div class="about-content">
						<i class="fa fa-users"></i>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section id="individual" class="bg-individual">
		<div class="container-fluid">
			<div class="row text-center">
				<div class="col-lg-12 wow fadeIn animated" style="visibility: visible; animation-name: fadeIn;">
				  <h2>Lorem ipsum dolor sit amet</h2>
				  <hr class="colored">
				  <!-- Carousel
					================================================== -->
					<div id="myCarousel1" class="carousel slide col-md-8 col-md-offset-2">        
						<div class="carousel-inner">           
							<div class="item active">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
							</div>
							<div class="item"> 
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>                                                         
							 </div>  
							<div class="item"> 
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>               
							</div> 
						</div>
						 <!-- Indicators -->
						  <ol class="carousel-indicators">
							<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel1" data-slide-to="1"></li>
							<li data-target="#myCarousel1" data-slide-to="2"></li>
						  </ol>                                                                 
					</div><!-- End Carousel -->
				</div>
			</div>
			<div class="row text-center individual-content-row" style="background-image: url('assets/img/bg7.jpg')">
				<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 wow fadeIn animated" data-wow-delay=".2s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeIn;">
					<div class="about-content">
						<i class="fa fa-life-ring"></i>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section id="about">
		<div class="container">
			<div class="row text-center">
				<div class="col-lg-12 wow fadeIn animated" style="visibility: visible; animation-name: fadeIn;">
				  <h2>Who am I?</h2>
				  <hr class="colored">
				</div>
			</div>
			<div class="row about-content-row">
				<div class="col-md-7 wow fadeIn animated" data-wow-delay=".2s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeIn;">
					<div class="about-content">
						<h3><a href="#"><i class="fa fa-linkedin-square"></i></a><span style="margin-left:50px">Name</span></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
						<p><i class="fa fa-get-pocket"></i><span style="margin-left:30px">Lorem ipsum dolor sit amet</span><br/>
						<i class="fa fa-get-pocket"></i><span style="margin-left:30px">Lorem ipsum dolor sit amet</span><br/>
						<i class="fa fa-get-pocket"></i><span style="margin-left:30px">Lorem ipsum dolor sit amet</span></p>
					</div>
				</div>
				<div class="text-center col-md-5 wow fadeIn animated" data-wow-delay=".6s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeIn;">
					<img src="assets/img/image.jpeg" class="img-responsive" alt="">
				</div>
			</div>
		</div>
	</section>
	<section id="contact" class="bg-contact">
		<div class="container">
			<div class="row text-center">
				<div class="col-lg-12 wow fadeIn animated" style="visibility: visible; animation-name: fadeIn;">
				  <h2>Contacts</h2>
				  <hr class="colored">
				</div>
			</div>
			<div class="row about-content-row">
				<div class="col-md-3 wow fadeIn animated" data-wow-delay=".2s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeIn;">
					<div class="about-content">
						<p><i class="fa fa-get-pocket"></i><span style="margin-left:30px">PHONE</span><br/>
						+00 (0) 1 23 45 67 89 (tel. 1)<br/>
						+00 (0) 1 23 45 67 89 (tel. 2)
						</p><BR/>
						<p><i class="fa fa-get-pocket"></i><span style="margin-left:30px">LANGUAGES</span><br/>
						lang 1, lang 2, lang 3.
						</p>
					</div>
				</div>
				<div class="col-md-3 wow fadeIn animated" data-wow-delay=".4s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeIn;">
					<div class="about-content">
				<input class="form-contro" type="text" placeholder="Name"></br>
				<input class="form-contro" type="text" placeholder="Email"></br>
				<input class="form-contro" type="text" placeholder="Phone">
				</div>
				</div>
				
				
				
					<div class="col-md-6 wow fadeIn animated" data-wow-delay=".4s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeIn;">
					<div class="about-content">
						<input class="form-control" type="text" placeholder="Message"> </br>
						<center><button class="btn" type="button">Send</button></center>
					</div>
				</div>
			</div>
		</div>
	</section>
  <!-- Core Scripts -->
  <script src="assets/js/jquery.js"></script>
  <script src="assets/js/bootstrap/bootstrap.min.js"></script>
  <!-- Plugin Scripts -->
  <script src="assets/js/plugins/jquery.easing.min.js"></script>
  <script src="assets/js/plugins/classie.js"></script>
  <script src="assets/js/plugins/cbpAnimatedHeader.js"></script>
  <script src="assets/js/plugins/owl-carousel/owl.carousel.js"></script>
  <script src="assets/js/plugins/jquery.magnific-popup/jquery.magnific-popup.min.js"></script>
  <script src="assets/js/plugins/background/core.js"></script>
  <script src="assets/js/plugins/background/transition.js"></script>
  <script src="assets/js/plugins/background/background.js"></script>
  <script src="assets/js/plugins/jquery.mixitup.js"></script>
  <script src="assets/js/plugins/wow/wow.min.js"></script>
  <script src="assets/js/contact_me.js"></script>
  <script src="assets/js/plugins/jqBootstrapValidation.js"></script>
  <!-- Custom Scripts -->
  <script src="assets/js/custom.js"></script>
  <script>
	$('#myCarousel, #myCarousel1').carousel({
		interval:   8000
	});
  </script>
  </body>

</html>

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
...

Czyli if id =companies css=asd else css=dsa

...

 

 

bardziej szedłbym w:

if pozycja_od_góry_elementu_companies == pozycja_scrolla

klasa=asd

else

klasa=dsa

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się


×