t9omek 0 Zgłoś post Napisano Październik 5, 2015 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
t9omek 0 Zgłoś post Napisano Październik 5, 2015 chciałbym do tego wykorzystać dynamiczną zmianę styli (javascript ) Udostępnij ten post Link to postu Udostępnij na innych stronach
ittw 3 Zgłoś post Napisano Październik 5, 2015 $(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
t9omek 0 Zgłoś post Napisano Październik 5, 2015 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
ittw 3 Zgłoś post Napisano Październik 5, 2015 ...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
