如何设置导航的高度以抵消Top Top动态？

问题描述：

我需要动态设置偏移量最大值。动态值为导航高度。如何设置导航的高度以抵消Top Top动态？

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

Codepen Link

'$烈文（ “身体，HTML”）'将要造成一个语法错误。 –

获取'$（'。navigation'）。height（）'将其设置为'.offset（）' –

您能否请进一步解释您想要做什么？并共享相关代码（包括html） –

答

编辑

看着你codepen后（我想我明白你想要什么）。我使用的navHeight滚动动画

看到里面片断低于或jsFiddle

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

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

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

 
});

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

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

 
.navigation { 
 
\t top: 0; 
 
\t left: 0; 
 
\t padding: 0 10%; 
 
\t width: 100%; 
 
\t position: fixed; 
 
\t color: #fff; 
 
\t box-sizing: border-box; 
 
\t background: #363636; 
 
\t text-align: center; 
 
} 
 
.navigation a { 
 
\t color: inherit; 
 
\t margin: 35px 5px; 
 
\t line-height: 150%; \t 
 
\t padding: 0 5px 0 20px; 
 
\t display: inline-block; 
 
\t text-decoration: none; 
 
\t border-left: 1px solid #fff; 
 
} 
 
.navigation a.active { color: yellow; } 
 
.navigation a:first-child { border: 0; } 
 
.box { 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t font-size: 14vw; 
 
\t padding-top: 100px; 
 
\t text-align: center; \t 
 
\t 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> 
 
\t <nav class="navigation"> 
 
\t \t <a class="active" href="#about" title="About">About</a> 
 
\t \t <a href="#work" title="Work">Work</a> 
 
\t \t <a href="#clients" title="Clients">Clients</a> 
 
\t \t <a href="#blogs" title="Blogs">Blogs</a> 
 
\t \t <a href="#contact" title="Contact">Contact</a> 
 
\t </nav> 
 
\t 
 
\t <div id="container"> 
 
\t \t <div id="about" class="box"> 
 
\t \t \t Plugin Demo 
 
\t \t </div> 
 
\t \t <div id="work" class="box"> 
 
\t \t \t Work 
 
\t \t </div> 
 
\t \t <div id="clients" class="box"> 
 
\t \t \t Clients 
 
\t \t </div> 
 
\t \t <div id="blogs" class="box"> 
 
\t \t \t Blogs 
 
\t \t </div> 
 
\t \t <div id="contact" class="box"> 
 
\t \t \t Contact 
 
\t \t </div> 
 
\t </div>

我加了我的codepen链接。 –

和？任何解释你想实现什么？你有一个固定的菜单，顺利滚动到锚点。这里有什么问题？无论如何编辑我的答案。检查出来或看到这里https://jsfiddle.net/DTcHh/33030/ –

@BharathKumar是你在找什么？ –

如何设置导航的高度以抵消Top Top动态？

相关推荐