0
ヒーローセクションをスクロールした後に固定されるスティッキーなnavbarを作ろうとしています。私はこれを行うには、マテリアライズを使用しようとしているが、私はそれを把握することができないので、私は非常に良いjavascriptではない。私はそれを行うにはマテリアライズプッシュピンを使用しようとしている（http://materializecss.com/pushpin.html）マテリアライズでスティッキーなnavbarを作成する
はここで、これまでに私のコードです：https://jsfiddle.net/2kc0fgj5/は、私は粘着性にするためにしようとしている部分が.menu div要素である 。私はjavbarを使ってこの方法でnavbarを動作させる方法は何でしょうか？
<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();
EDIT：固定リンクとコードを追加しました。
ここにあなたのコードを投稿 –
が、私は間違ったリンクを貼り付け@JosanIracheta申し訳ありませんが、それはjsfiddleに行くことを意味しました。 – Ned
この質問で投稿したコードサンプルを改訂することを検討してください。現在のところ、書式設定とスコープは、私たちがあなたを助けることを困難にしています。ここではそれを始めるための[偉大な資源]（http://stackoverflow.com/help/mcve）です。 -1、それを間違った方法で取らないでください。投票は、ここでコンテンツの問題を示す方法です。あなたの書式とコードサンプルを改善してください。私（または誰か）が喜んで元に戻します。あなたのコードで幸運！ –