Question

我正在尝试制作一个粘贴的导航栏，在滚动浏览英雄部分后会固定。我正在尝试使用materialize来做到这一点，但我不是很擅长javascript，所以我无法弄明白。我正在尝试使用Materialise Pushpin来执行此操作（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();

编辑：修复了链接并添加了代码。

Answer 1

你需要在HTML和JS中进行一些修复

HTML

更改此第20和21行

<div class="menu">
        <nav>

到

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

JS

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

Working Fiddle

希望这有助于......

Answer 2

您可以将其添加到您的js文件中

    $(document).ready(function(){
       $(window).scroll(function(){
    if($(window).scrollTop()>150){
        $('nav').addClass('sticky-nav');
      }
     });
    )};

并将其保存到CSS文件

    .sticky-nav{
      position: fixed;
      top:0;
     }

在Materialise中创建粘性导航栏

2 个答案: