Created
December 6, 2017 14:28
-
-
Save kharakhordindemo/3ca5c0f05bfc2020f0a5764ed6983cac to your computer and use it in GitHub Desktop.
Липкое меню
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Липкое меню</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>sticky <br> navigation</h1> | |
| <h3>scroll down</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates tenetur culpa quae, sit aut minima corporis corrupti aperiam id, a incidunt tempora iste debitis unde itaque recusandae. Sunt numquam similique dicta officia laboriosam tenetur, nam dolore rerum quae, eos dignissimos! Saepe veritatis soluta eos laboriosam delectus voluptatem. Aliquam molestias facere, eveniet, error nulla harum neque labore cupiditate, explicabo pariatur, asperiores?</p> | |
| <nav class="clearfix"> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Contacts</a></li> | |
| </ul> | |
| </nav> | |
| <!--<span class="show-navPos"></span>--> | |
| <!--<span class="show-winPos"></span>--> | |
| </header> | |
| <section class="content"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cumque, magnam natus ab explicabo consequuntur accusantium dolores nobis maxime quas illo corrupti ullam ratione. Ipsa iure vel, optio eaque similique corrupti, saepe eos, modi, voluptatum rerum inventore sapiente provident eius illo consequuntur sunt quaerat totam. Quis, omnis non facere doloremque velit voluptatibus debitis amet iusto neque magni ratione est perferendis veniam deserunt totam dolores nesciunt tenetur nam ea, voluptate quod distinctio dolorem cupiditate autem. Aliquid magnam cupiditate ipsa provident et sunt. Ratione magni officia, distinctio, autem optio voluptatibus natus. Commodi quasi cumque, rerum labore sequi nostrum ducimus ipsam omnis minus.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cumque, magnam natus ab explicabo consequuntur accusantium dolores nobis maxime quas illo corrupti ullam ratione. Ipsa iure vel, optio eaque similique corrupti, saepe eos, modi, voluptatum rerum inventore sapiente provident eius illo consequuntur sunt quaerat totam. Quis, omnis non facere doloremque velit voluptatibus debitis amet iusto neque magni ratione est perferendis veniam deserunt totam dolores nesciunt tenetur nam ea, voluptate quod distinctio dolorem cupiditate autem. Aliquid magnam cupiditate ipsa provident et sunt. Ratione magni officia, distinctio, autem optio voluptatibus natus. Commodi quasi cumque, rerum labore sequi nostrum ducimus ipsam omnis minus.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cumque, magnam natus ab explicabo consequuntur accusantium dolores nobis maxime quas illo corrupti ullam ratione. Ipsa iure vel, optio eaque similique corrupti, saepe eos, modi, voluptatum rerum inventore sapiente provident eius illo consequuntur sunt quaerat totam. Quis, omnis non facere doloremque velit voluptatibus debitis amet iusto neque magni ratione est perferendis veniam deserunt totam dolores nesciunt tenetur nam ea, voluptate quod distinctio dolorem cupiditate autem. Aliquid magnam cupiditate ipsa provident et sunt. Ratione magni officia, distinctio, autem optio voluptatibus natus. Commodi quasi cumque, rerum labore sequi nostrum ducimus ipsam omnis minus.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cumque, magnam natus ab explicabo consequuntur accusantium dolores nobis maxime quas illo corrupti ullam ratione. Ipsa iure vel, optio eaque similique corrupti, saepe eos, modi, voluptatum rerum inventore sapiente provident eius illo consequuntur sunt quaerat totam. Quis, omnis non facere doloremque velit voluptatibus debitis amet iusto neque magni ratione est perferendis veniam deserunt totam dolores nesciunt tenetur nam ea, voluptate quod distinctio dolorem cupiditate autem. Aliquid magnam cupiditate ipsa provident et sunt. Ratione magni officia, distinctio, autem optio voluptatibus natus. Commodi quasi cumque, rerum labore sequi nostrum ducimus ipsam omnis minus.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cumque, magnam natus ab explicabo consequuntur accusantium dolores nobis maxime quas illo corrupti ullam ratione. Ipsa iure vel, optio eaque similique corrupti, saepe eos, modi, voluptatum rerum inventore sapiente provident eius illo consequuntur sunt quaerat totam. Quis, omnis non facere doloremque velit voluptatibus debitis amet iusto neque magni ratione est perferendis veniam deserunt totam dolores nesciunt tenetur nam ea, voluptate quod distinctio dolorem cupiditate autem. Aliquid magnam cupiditate ipsa provident et sunt. Ratione magni officia, distinctio, autem optio voluptatibus natus. Commodi quasi cumque, rerum labore sequi nostrum ducimus ipsam omnis minus.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cumque, magnam natus ab explicabo consequuntur accusantium dolores nobis maxime quas illo corrupti ullam ratione. Ipsa iure vel, optio eaque similique corrupti, saepe eos, modi, voluptatum rerum inventore sapiente provident eius illo consequuntur sunt quaerat totam. Quis, omnis non facere doloremque velit voluptatibus debitis amet iusto neque magni ratione est perferendis veniam deserunt totam dolores nesciunt tenetur nam ea, voluptate quod distinctio dolorem cupiditate autem. Aliquid magnam cupiditate ipsa provident et sunt. Ratione magni officia, distinctio, autem optio voluptatibus natus. Commodi quasi cumque, rerum labore sequi nostrum ducimus ipsam omnis minus.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cumque, magnam natus ab explicabo consequuntur accusantium dolores nobis maxime quas illo corrupti ullam ratione. Ipsa iure vel, optio eaque similique corrupti, saepe eos, modi, voluptatum rerum inventore sapiente provident eius illo consequuntur sunt quaerat totam. Quis, omnis non facere doloremque velit voluptatibus debitis amet iusto neque magni ratione est perferendis veniam deserunt totam dolores nesciunt tenetur nam ea, voluptate quod distinctio dolorem cupiditate autem. Aliquid magnam cupiditate ipsa provident et sunt. Ratione magni officia, distinctio, autem optio voluptatibus natus. Commodi quasi cumque, rerum labore sequi nostrum ducimus ipsam omnis minus.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cumque, magnam natus ab explicabo consequuntur accusantium dolores nobis maxime quas illo corrupti ullam ratione. Ipsa iure vel, optio eaque similique corrupti, saepe eos, modi, voluptatum rerum inventore sapiente provident eius illo consequuntur sunt quaerat totam. Quis, omnis non facere doloremque velit voluptatibus debitis amet iusto neque magni ratione est perferendis veniam deserunt totam dolores nesciunt tenetur nam ea, voluptate quod distinctio dolorem cupiditate autem. Aliquid magnam cupiditate ipsa provident et sunt. Ratione magni officia, distinctio, autem optio voluptatibus natus. Commodi quasi cumque, rerum labore sequi nostrum ducimus ipsam omnis minus.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cumque, magnam natus ab explicabo consequuntur accusantium dolores nobis maxime quas illo corrupti ullam ratione. Ipsa iure vel, optio eaque similique corrupti, saepe eos, modi, voluptatum rerum inventore sapiente provident eius illo consequuntur sunt quaerat totam. Quis, omnis non facere doloremque velit voluptatibus debitis amet iusto neque magni ratione est perferendis veniam deserunt totam dolores nesciunt tenetur nam ea, voluptate quod distinctio dolorem cupiditate autem. Aliquid magnam cupiditate ipsa provident et sunt. Ratione magni officia, distinctio, autem optio voluptatibus natus. Commodi quasi cumque, rerum labore sequi nostrum ducimus ipsam omnis minus.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cumque, magnam natus ab explicabo consequuntur accusantium dolores nobis maxime quas illo corrupti ullam ratione. Ipsa iure vel, optio eaque similique corrupti, saepe eos, modi, voluptatum rerum inventore sapiente provident eius illo consequuntur sunt quaerat totam. Quis, omnis non facere doloremque velit voluptatibus debitis amet iusto neque magni ratione est perferendis veniam deserunt totam dolores nesciunt tenetur nam ea, voluptate quod distinctio dolorem cupiditate autem. Aliquid magnam cupiditate ipsa provident et sunt. Ratione magni officia, distinctio, autem optio voluptatibus natus. Commodi quasi cumque, rerum labore sequi nostrum ducimus ipsam omnis minus.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cumque, magnam natus ab explicabo consequuntur accusantium dolores nobis maxime quas illo corrupti ullam ratione. Ipsa iure vel, optio eaque similique corrupti, saepe eos, modi, voluptatum rerum inventore sapiente provident eius illo consequuntur sunt quaerat totam. Quis, omnis non facere doloremque velit voluptatibus debitis amet iusto neque magni ratione est perferendis veniam deserunt totam dolores nesciunt tenetur nam ea, voluptate quod distinctio dolorem cupiditate autem. Aliquid magnam cupiditate ipsa provident et sunt. Ratione magni officia, distinctio, autem optio voluptatibus natus. Commodi quasi cumque, rerum labore sequi nostrum ducimus ipsam omnis minus.</p> | |
| </section> | |
| <script src="../js/jquery-3.2.1.min.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| var navPos, winPos, navHeight; | |
| function refreshVar() { | |
| navPos = $('nav').offset().top; | |
| navHeight = $('nav').outerHeight(true); | |
| //$('.show-navPos').text(navPos); | |
| } | |
| refreshVar(); | |
| $(window).resize(refreshVar);//отслеживает положение меню относительно окна | |
| $('<div class="clone-nav"></div>').insertBefore('nav').css('height', navHeight).hide(); | |
| $(window).scroll(function() { | |
| winPos = $(window).scrollTop(); | |
| //$('.show-winPos').text(winPos); | |
| if (winPos >= navPos) { | |
| $('nav').addClass('fixed shadow'); | |
| $('.clone-nav').show(); | |
| } else { | |
| $('nav').removeClass('fixed shadow'); | |
| $('.clone-nav').hide(); | |
| } | |
| });//отслеживает положение полосы прокрутки | |
| });//end ready | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*---Сброс стилей---*/ | |
| html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, big, em, font, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| outline: 0; | |
| font-weight: inherit; | |
| font-style: inherit; | |
| font-size: 100%; | |
| font-family: inherit; | |
| vertical-align: baseline; | |
| } | |
| :focus { | |
| outline: 0; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| table { | |
| border-collapse: separate; border-spacing: 0; | |
| } | |
| caption, th, td { | |
| text-align: left; | |
| font-weight: normal; | |
| } | |
| strong,b{ | |
| font-weight:bold | |
| } | |
| em{ | |
| font-style:italic | |
| } | |
| article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| *{ | |
| box-sizing: border-box; | |
| } | |
| /*---Конец сброса стилей---*/ | |
| /*---Clearfix---*/ | |
| .clearfix:before, .clearfix:after{ | |
| content: ""; | |
| display: table; | |
| } | |
| .clearfix:after{ | |
| clear: both; | |
| } | |
| /*---Clearfix конец---*/ | |
| /*---Липкое меню---*/ | |
| body{ | |
| font-family: "Arial", sans-serif; | |
| background-color: #eaeaea; | |
| } | |
| header{ | |
| position: relative; | |
| text-transform: uppercase; | |
| color: #6acbcb; | |
| } | |
| header h1{ | |
| font-size: 72px; | |
| } | |
| header h3{ | |
| font-size: 48px; | |
| } | |
| header nav{ | |
| padding: 20px 40px; | |
| background-color: #6acbcb; | |
| } | |
| header nav li{ | |
| display: block; | |
| float: left; | |
| } | |
| header nav li a{ | |
| display: block; | |
| margin-right: 20px; | |
| font-size: 24px; | |
| color: #eaeaea; | |
| text-decoration: none; | |
| transition: all 0.5s; | |
| } | |
| header nav li a:hover{ | |
| color: #c9c9c9; | |
| } | |
| section p{ | |
| padding: 20px; | |
| } | |
| .fixed{ | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| } | |
| .shadow{ | |
| box-shadow: 0px 7px 17px -2px rgba(117,117,117,1); | |
| } | |
| /*---Координаты---*/ | |
| .show-navPos{ | |
| position: fixed; | |
| z-index: 3; | |
| top: 30px; | |
| right: 30px; | |
| padding: 10px; | |
| color: #fff; | |
| border-radius: 3px; | |
| background-color: #e53333; | |
| } | |
| .show-winPos{ | |
| position: fixed; | |
| z-index: 3; | |
| top: 90px; | |
| right: 30px; | |
| padding: 10px; | |
| color: #fff; | |
| border-radius: 3px; | |
| background-color: #3949c3; | |
| } | |
| /*---Координаты конец---*/ | |
| /*---Липкое меню конец---*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment