Javascript 在Materialize中创建粘性导航栏
我正在尝试制作一个粘性导航条,在滚动过英雄部分后,该导航条将被修复。我试图使用materialize来实现这一点,但我不太擅长javascript,所以我无法理解它。我正在尝试使用物化图钉来完成() 以下是我目前的代码: 我试图使之成为粘性的部分是.menu div。我将使用什么方法使用javascript使导航栏以这种方式运行Javascript 在Materialize中创建粘性导航栏,javascript,html,css,materialize,Javascript,Html,Css,Materialize,我正在尝试制作一个粘性导航条,在滚动过英雄部分后,该导航条将被修复。我试图使用materialize来实现这一点,但我不太擅长javascript,所以我无法理解它。我正在尝试使用物化图钉来完成() 以下是我目前的代码: 我试图使之成为粘性的部分是.menu div。我将使用什么方法使用javascript使导航栏以这种方式运行 <head> <title>Voice</title> <link rel="stylesheet" href="https:
<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>
目前的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();
编辑:修复了链接并添加了代码。您需要在HTML和JS中进行一些修复 HTML 将此部分更改为第20行和第21行
<div class="menu">
<nav>
希望这有帮助。您需要在HTML和JS中进行一些修复 HTML 将此部分更改为第20行和第21行
<div class="menu">
<nav>
希望这有帮助。您可以将其添加到js文件中
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>150){
$('nav').addClass('sticky-nav');
}
});
)};
这是一个CSS文件
.sticky-nav{
position: fixed;
top:0;
}
您可以将其添加到js文件中
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>150){
$('nav').addClass('sticky-nav');
}
});
)};
这是一个CSS文件
.sticky-nav{
position: fixed;
top:0;
}
发布你的代码here@JosanIracheta对不起,我粘贴了错误的链接,它是要去jsFoDel.请考虑修改你在这个问题中张贴的代码示例。目前,它的格式和范围使我们很难帮助您;这是一个让你开始学习的方法-1、不要误会。否决票是指我们如何表明这里存在内容问题;改进您的格式和代码示例,我(或有人会)很乐意恢复它。祝你的代码好运!您要求提供JavaScript(JS)代码的帮助,但只提供了HTML+CSS示例。作为提示,尝试运行Materialize开发人员提供的JS Pushpin示例,然后尝试找出如何根据您的特殊需要调整/自定义它here@JosanIracheta对不起,我粘贴了错误的链接,它是要去jsFoDel.请考虑修改你在这个问题中张贴的代码示例。目前,它的格式和范围使我们很难帮助您;这是一个让你开始学习的方法-1、不要误会。否决票是指我们如何表明这里存在内容问题;改进您的格式和代码示例,我(或有人会)很乐意恢复它。祝你的代码好运!您要求提供JavaScript(JS)代码的帮助,但只提供了HTML+CSS示例。作为提示,尝试运行Materialize开发人员提供的JS Pushpin示例,然后试着找出如何根据您的特殊需要调整/自定义它。有没有方法可以阻止内容使用您的方法在页面上向上跳跃?如何不使用jquery进行操作?有没有方法可以阻止内容使用您的方法在页面上向上跳跃?如何不使用jquery进行操作?