在實現中創建粘性導航欄

我試圖製作一個粘滯的導航欄，它在滾動過去英雄部分後變得固定。我試圖使用實現來做到這一點，但我不是很擅長JavaScript，所以我無法弄清楚。我試圖使用Materialise圖釘來做到這一點（http://materializecss.com/pushpin.html）在實現中創建粘性導航欄

這是我的代碼到目前爲止：https://jsfiddle.net/2kc0fgj5/ 我試圖讓粘滯的部分是.menu div。我會用什麼方法使用JavaScript我會用這種方式讓導航欄的行爲？

<head> 
<title>Voice</title> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"> 
<link rel="stylesheet" href="style.css"> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
</head> 

<body> 
<section id="hero" class="segment"> 
    <div id="hero-content" class="valign-wrapper"> 
     <div id="hero-child" class="center-align"> 
      <img src="resources/images/voice-circle.png" id="voice-circle" /><br/> 
      <a href="#features" class="btn white blue-text hero-btn">Learn More</a><br/> 
      <a href="#" class="btn white blue-text hero-btn">Order Now</a> 
     </div> 
    </div> 
</section> 
<div class="menu"> 
    <nav> 
     <div class="nav-wrapper white"> 
      <a href="#hero" class="brand-logo center blue-text">Voice</a> 
      <a href="#" data-activates="mobile-demo" class="button-collapse blue-text"><i class="material-icons">menu</i></a> 
      <ul id="nav-mobile" class="right hide-on-med-and-down"> 
       <li><a href="#features">Features</a></li> 
       <li><a href="#testimonials">Testimonials</a></li> 
       <li><a href="#workshops">Workshops</a></li> 
       <li><a href="#prices">Prices</a></li> 
      </ul> 
      <ul class="side-nav" id="mobile-demo"> 
       <li><a href="#features">Features</a></li> 
       <li><a href="#testimonials">Testimonials</a></li> 
       <li><a href="#workshops">Workshops</a></li> 
       <li><a href="#prices">Prices</a></li> 
      </ul> 
     </div> 
    </nav> 
</div> 
<section id="features" class="segment"> 

</section> 
</body>

所附CSS：

.segment { 
height: 100vh; 
width: 100%; 
background-color:aquamarine; 
} 

.divide { 
    height: 50vh; 
    width: 100%; 
} 

#hero { 
    background-image: url('resources/images/hero%20header.png'); 
    background-size: auto 100vh; 
    background-position: center; 
} 

.bpblue-text { 
    color: #21A1EC; 
} 

#nav-mobile>li>a { 
    color: #21A1EC; 
} 

#voice-circle { 
    width: 30%; 
    height: auto; 
} 

.hero-btn { 
    margin: 10px; 
    width: 300px; 
} 

#hero-content { 
    width: 100%; 
    height: 100vh; 
} 

#hero-child { 
    width: 100%; 
}

而當前的javascript，至今只有具有平滑滾動和側導航欄

$('a[href*="#"]') 
// Remove links that don't actually link to anything 
.not('[href="#"]') 
.not('[href="#0"]') 
.click(function (event) { 
    // On-page links 
    if (
     location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && 
     location.hostname == this.hostname 
    ) { 
     // Figure out element to scroll to 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
     // Does a scroll target exist? 
     if (target.length) { 
      // Only prevent default if animation is actually gonna happen 
      event.preventDefault(); 
      $('html, body').animate({ 
       scrollTop: target.offset().top 
      }, 1000, function() { 
       // Callback after animation 
       // Must change focus! 
       var $target = $(target); 
       $target.focus(); 
       if ($target.is(":focus")) { // Checking if the target was focused 
        return false; 
       } else { 
        $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable 
        $target.focus(); // Set focus again 
       }; 
      }); 
     } 
    } 
}); 

$(".button-collapse").sideNav();

編輯：固定連桿和添加的代碼。

來源

2017-07-28 Ned

在這裏發表您的代碼 –

@JosanIracheta對不起，我粘貼了錯誤的鏈接，它是爲了走的jsfiddle。 – Ned

請考慮修改您在此問題中發佈的代碼示例。就目前而言，它的格式和範圍使我們很難幫助你;這裏是一個[很好的資源]（http://stackoverflow.com/help/mcve）讓你開始。 -1，不要採取錯誤的方式。投票是我們在這裏指出內容問題的方式;改進您的格式和代碼示例，我（或某人）很樂意恢復它。祝你的代碼好運！ –

需要在HTML和JS的一些修復

HTML

改變這一部分線20和21

<div class="menu"> 
     <nav>

到

<div id="menu"> 
     <nav class="menu" data-target="menu">

$(document).ready(function() { 
    var menu = $('.menu'); 
     var target = $('#' +menu.attr("data-target")); 
    menu.pushpin({ 
     top: target.offset().top, 
    }); 
});

Working Fiddle

希望這有助於..

來源

2017-07-29 02:36:31

在實現中創建粘性導航欄

回答

相關問題