如何设置导航高度以动态偏移顶部？

Question

我需要动态设置偏移顶部值。动态值为 导航的高度。

   $("body, html").animate({ 
    scrollTop: $( element ).offset().top - 90
    }, 800);

Codepen Link

Answer 1

编辑

看了你的 codepen 之后（我猜我明白你想要什么）。我在滚动动画中使用了 navHeight

见下面的 sn-p 或jsFiddle

$('.navigation a').on( 'click', function(event) {
	var target 	= jQuery( this );
    var element = target.attr('href');
		var navHeight = $("nav").height()

    jQuery('.navigation a').removeClass('active')
    target.addClass('active');

    jQuery("body, html").animate({ 
      scrollTop: jQuery( element ).offset().top - navHeight	
    }, 800);
    return false;

});

* {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

body {
	font-size: 16px;		
	background: #eee;
	padding-top: 90px;
	font-family: 'Roboto',Arial, Helvetica, Sans-serif;
  overflow-x:hidden;
}

.navigation {
	top: 0;
	left: 0;
	padding: 0 10%;
	width: 100%;
	position: fixed;
	color: #fff;
	box-sizing: border-box;
	background: #363636;
	text-align: center;
}
.navigation a {
	color: inherit;
	margin: 35px 5px;
	line-height: 150%;	
	padding: 0 5px 0 20px;
	display: inline-block;
	text-decoration: none;
	border-left: 1px solid #fff;
} 
.navigation a.active { color: yellow; }
.navigation a:first-child { border: 0; }
.box {
	width: 100vw;
	height: 100vh;
	font-size: 14vw;
	padding-top: 100px;
	text-align: center;	
	background: #4CD2DA;
}
.box:nth-child(2) { background: #59DAE2; }
.box:nth-child(3) { background: #4372A6; }
.box:nth-child(4) { background: #D8E0E3; }
.box:nth-child(5) { background: #4B565A; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
	<nav class="navigation">
		<a class="active" href="#about" title="About">About</a>
		<a href="#work" title="Work">Work</a>
		<a href="#clients" title="Clients">Clients</a>
		<a href="#blogs" title="Blogs">Blogs</a>
		<a href="#contact" title="Contact">Contact</a>
	</nav>
	
	<div id="container">
		<div id="about" class="box">
			Plugin Demo
		</div>
		<div id="work" class="box">
			Work
		</div>
		<div id="clients" class="box">
			Clients
		</div>
		<div id="blogs" class="box">
			Blogs
		</div>
		<div id="contact" class="box">
			Contact
		</div>
	</div>