Réaliser l’équivalent du composant Magellan de Foundation 6 for sites.
Source: Highlight menu item on scroll – A PEN BY joxmar.
Les sources HTML et CSS sont facultatives; en tout cas, la partie jQuery peut assez facilement s’adapter.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// Cache selectors var lastId, topMenu = $("#mainNav"), topMenuHeight = topMenu.outerHeight()+1, // All list items menuItems = topMenu.find("a"), // Anchors corresponding to menu items scrollItems = menuItems.map(function(){ var item = $($(this).attr("href")); if (item.length) { return item; } }); // Bind click handler to menu items // so we can get a fancy scroll animation menuItems.click(function(e){ var href = $(this).attr("href"), offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; $('html, body').stop().animate({ scrollTop: offsetTop }, 850); e.preventDefault(); }); // Bind to scroll $(window).scroll(function(){ // Get container scroll position var fromTop = $(this).scrollTop()+topMenuHeight; // Get id of current scroll item var cur = scrollItems.map(function(){ if ($(this).offset().top < fromTop) return this; }); // Get the id of the current element cur = cur[cur.length-1]; var id = cur && cur.length ? cur[0].id : ""; if (lastId !== id) { lastId = id; // Set/remove active class menuItems .parent().removeClass("active") .end().filter("[href=#"+id+"]").parent().addClass("active"); } }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<nav> <ul id="mainNav"> <li class="active"><a href="#home">Home</a></li> <li><a href="#work">Work</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <section id="home"><h2>Home</h2></section> <section id="work" data-sr><h2>Work</h2></section> <section id="about"><h2>About</h2></section> <section id="contact"><h2>Contact</h2></section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
nav{ position:fixed; top:0; left:0; background:#55443D; height:40px; width:100%; z-index: 1; ul{ margin:0; padding:0; list-style:none; position:relative; display:table; margin:0 auto; li{ display:table-cell; a{ padding:10px 20px; display:block; color:white; text-decoration:none; transition:all 0.3s ease-in-out; &:hover{ color:#F38A8A; } } } .active{ a{ color:#F38A8A; border-bottom:3px solid #F38A8A; } } } } section{ height: 100vh; position:relative; margin: 0; padding: 0; display:block; z-index: 0; } #home{ background:#A0CAB5; top:40px; } #work{ background:#CDE9CA; } #about{ background:#F1EDD0; } #contact{ background:#F38A8A; } h2{ padding: 0; margin: 0; } |
Cas plus tordu
…où le sticky est séparé en 2 éléments.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
/* * [nCatalog product page] Handle sticky tabs/anchors feature */ if ($('#product-page-tabs').length > 0) { $('.accordion-item').removeAttr('id'); function getStickyHeight() { var productPageSticky = $('#productPageHeader').outerHeight(true); var searchBar = $('.header-second-row-wrapper').outerHeight(true); //console.log(productPageSticky + searchBar); return productPageSticky + searchBar; } getStickyHeight(); // Cache selectors var lastId, topMenu = $('#product-page-tabs'), // topMenuHeight = topMenu.outerHeight()+1, topMenuHeight = getStickyHeight(), // All list items menuItems = topMenu.children('.tabs-title').find('a'), // Anchors corresponding to menu items scrollItems = menuItems.map(function(){ var item = $($(this).attr('href')); if (item.length) { return item; } }); // Bind click handler to menu items // so we can get a fancy scroll animation menuItems.click(function(e){ var href = $(this).attr('href'); var offsetTop = href === '#' ? 0 : $(href).offset().top-topMenuHeight+1; var currentScroll = $(document).scrollTop(); if (currentScroll === 0) { offsetTop = $(href).offset().top-2*topMenuHeight+1; } $('html, body').stop().animate({ scrollTop: offsetTop }, 850); e.preventDefault(); }); // Bind to scroll $(window).scroll(function(){ // Get container scroll position var fromTop = $(this).scrollTop()+topMenuHeight; // Get id of current scroll item var cur = scrollItems.map(function(){ if ($(this).offset().top < fromTop) return this; }); // Get the id of the current element cur = cur[cur.length-1]; var id = cur && cur.length ? cur[0].id : ''; if (lastId !== id) { lastId = id; // Set/remove active class menuItems .parent().removeClass('is-active') .end().filter('[href="#'+id+'"]').parent().addClass('is-active'); } }); } |