我在我的html中使用了动画滚动和滚动插件以获得不同的滚动效果。但问题是我的导航栏从第二部分开始（不是在第一部分中）。我已尝试window.scrolltop()和{{在jquery中有1}}和offset().top但是它无论如何都没有得到修复。我的html与css代码
HTML：
position.top和Css：
<!DOCTYPE html>
<html>
<head>
<title>Welcome!!!</title>
<link rel="stylesheet" href="fonts/Lato-Light.ttf"/>
<link rel="stylesheet" type="text/css" href="css/custom_style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="css/custom.css" /> -->
</head>
<body>
<div class="content-fluid" style="min-width: 300px;">
<div class="row">
<section class="panel welcome col-lg-12" data-section-name="welcome">
<header class="col-lg-7 header_overwrite">
<div class="col-lg-8 wrapper">
<h1 class="h1_style" id="greetings"></h1>
</div>
</header>
<a href="#home" class="scroll">Scroll down to Browse</a>
</section>
<section class="panel home col-lg-12" data-section-name="home">
<div class="row">
<div class="fixed_nav hidden ">
<div class=" col-lg-2 btn-color-shihab">
<a href="#" onclick="$('body').animatescroll();"><span><h1>Shihab.me</h1></span></a>
</div>
<div class=" col-lg-2 btn-color-home">
<a href="#home"><span><h1>Home</h1></span></a>
</div>
<div class=" col-lg-2 btn-color-resume">
<a href="#" onclick="$('#section-2').animatescroll();"><span><h1>Resume</h1></span></a>
</div>
<div class=" col-lg-2 btn-color-skill">
<a href="#" onclick="$('#section-3').animatescroll();"><span><h1>Skill</h1></span></a>
</div>
<div class=" col-lg-2 btn-color-portfolio">
<a href="#"><span><h1>Portfolio</h1></span></a>
</div>
<div class=" col-lg-2 btn-color-contact">
<a href="#"><span><h1>Contact</h1></span></a>
</div>
</div>
</div>
</section>
<section class="panel resume col-lg-12" data-section-name="resume">
<div id="section-2">
<div class="content-wrapper w70">
<h1>What is it exactly?</h1>
<p><strong>AnimateScroll</strong> is a jQuery plugin which enables you to <strong>scroll to any part of the page
in style</strong> by just calling the <code>animatescroll()</code> function with the <code>Id</code> or <code>Classname</code>
of the element where you want to scroll to.</p>
<p><strong>Basic usage:</strong></p>
<pre><code class="language-javascript">$('body').animatescroll();</code></pre>
<button class="btn demo-btn" onclick="$('body').animatescroll();">Click for a Demo</button>
<p>
It gives power to the user with its various options to customize the style of scrolling, scroll speed and many more.
Supports more than 30 unique Scrolling Styles.
</p>
</div>
</div>
</section>
<section class="panel skill col-lg-12" data-section-name="skill">
<div id="section-3">
<div class="content-wrapper w70">
<h1>What is it exactly?</h1>
<p><strong>AnimateScroll</strong> is a jQuery plugin which enables you to <strong>scroll to any part of the page
in style</strong> by just calling the <code>animatescroll()</code> function with the <code>Id</code> or <code>Classname</code>
of the element where you want to scroll to.</p>
<p><strong>Basic usage:</strong></p>
<pre><code class="language-javascript">$('body').animatescroll();</code></pre>
<button class="btn demo-btn" onclick="$('body').animatescroll();">Click for a Demo</button>
<p>
It gives power to the user with its various options to customize the style of scrolling, scroll speed and many more.
Supports more than 30 unique Scrolling Styles.
</p>
</div>
</div>
</section>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollify.min.js"></script>
<script src="js/animatescroll.js"></script>
<script>
$(function() {
$(".panel").css({"height":$(window).height()});
$.scrollify({
section:".panel"
});
$(".scroll").click(function(e) {
e.preventDefault();
$.scrollify.move("#home");
});
});
//Greetings Based on the user's time
//var offset = ((new Date()).getTimezoneOffset()/60)*(-1);
//console.log(offset+'hrs');
//console.log((new Date()).getTime());
// var current_time = new Date().getHours()+':'+new Date().getMinutes()+':'+ new Date().getSeconds();
var current_time = new Date().getHours();
//console.log(current_time);
if(current_time >=0 && current_time <12 ){
$("#greetings").text("Good Morning!!");
}else if(current_time >=12 && current_time <18 ){
$("#greetings").text("Good Afternoon!!");
}else if(current_time >=18 && current_time !=0){
$("#greetings").hide().text("Good Evening!!").fadeIn(2000);
}
$(".wrapper").hide().fadeIn(2000);
$(window).scroll(function(){
var scroll = $(this).scrollTop();
var height = $(".home").height();
var barposition = $(".home").offset().top;
if(scroll >= barposition){
$(".fixed_nav").removeClass("hidden").hide().fadeIn(500);
//$(".fixed_nav").css({"position":"fixed","top":barposition});
console.log(barposition);
}else{
console.log("not yet");
$(".fixed_nav").addClass("hidden");
}
})
</script>
</body>
</html>