锚导航与坚持到顶部菜单..需要向锚点添加动态偏移量
anchors navigation with stick to top menu... need to add dynamic offset to anchor
我的菜单和基于 #anchors 的导航有问题。我正在使用 JS 函数在滚动时将菜单置于顶部 （#stickyheader）。我的菜单上有一个div，滚动时消失了 （#unstickyheader）。此div的高度不是固定的，它将取决于其内容长度以及屏幕的宽度。我的菜单垂直链接到页面的不同部分，在我的 js 函数中处理锚点导航，我有一个偏移值，在我的菜单下显示带有定义的填充的部分标题：
$target.offset().top-90
这是我的 CSS：
html,body{padding:0;margin:0;font-family: Helvetica, Geneva, Arial sans-serif;font-size:16px;;color: black;line-height: 24px;color: black;text-transform: lowercase;letter-spacing: 1px;background-color: white}
#wrapper{margin-left: 30px;margin-right: 30px;padding-bottom: 20px;}
#entry{position: relative}
#stickyheader { width: 100%;padding-top:10px;top: 0;z-index: 1000;background-color: white;padding-bottom: 10px;line-height: 24px;}
#unstickyheader {height:auto;padding-top:20px;}
.page{min-height: 3000px}
.separation{height: 600px;
background-color: white;
width: 100%;
margin-top: 300px;
margin-bottom: 300px;}
我的网页 ：
<div id="wrapper">
<div id="unstickyheader">
<div class="bloc_bio">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor dignissim mollis. Nam tempor tristique ultricies. Nullam blandit aliquet augue, et elementum elit. Morbi at enim ut magna semper varius. Curabitur purus turpis, condimentum at ullamcorper vel, adipiscing vel enim. Phasellus hendrerit semper nisi quis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas nibh nunc, ac facilisis dui ultricies eget. Integer vestibulum ultricies diam, ut laoreet risus. Morbi suscipit venenatis tortor sit amet faucibus. Ut eu justo elementum, ultrices elit in, eleifend enim.
</div>
</div>
<div id="stickyheader">
<a href="#disco">discography</a><span class="grey"> - </span>
<a href="#bio">biography</a><span class="grey"> - </span>
<a href="#press">press</a><span class="grey"> - </span>
<a href="#studio">studio</a><span class="grey"> - </span>
<a href="#contacts">contacts</a>
</div>
<div id="entry">
<div class="page">
<div class="separation"></div>
<div id="disco" class="ancre"></div>
<div class="bloc_bio">
<div class="legende">DISCOGRAPHY</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor dignissim mollis. Nam tempor tristique ultricies. Nullam blandit aliquet augue, et elementum elit. Morbi at enim ut magna semper varius. Curabitur purus turpis, condimentum at ullamcorper vel, adipiscing vel enim. Phasellus hendrerit semper nisi quis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas nibh nunc, ac facilisis dui ultricies eget. Integer vestibulum ultricies diam, ut laoreet risus. Morbi suscipit venenatis tortor sit amet faucibus. Ut eu justo elementum, ultrices elit in, eleifend enim.
</div>
<div class="separation"></div>
<div id="bio" class="ancre"></div>
<div class="bloc_bio">
<div class="legende">BIOGRAPHY</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor dignissim mollis. Nam tempor tristique ultricies. Nullam blandit aliquet augue, et elementum elit. Morbi at enim ut magna semper varius. Curabitur purus turpis, condimentum at ullamcorper vel, adipiscing vel enim. Phasellus hendrerit semper nisi quis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas nibh nunc, ac facilisis dui ultricies eget. Integer vestibulum ultricies diam, ut laoreet risus. Morbi suscipit venenatis tortor sit amet faucibus. Ut eu justo elementum, ultrices elit in, eleifend enim.
</div>
<div class="separation"></div>
<div id="press" class="ancre"></div>
<div class="bloc_bio">
<div class="legende">PRESS</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor dignissim mollis. Nam tempor tristique ultricies. Nullam blandit aliquet augue, et elementum elit. Morbi at enim ut magna semper varius. Curabitur purus turpis, condimentum at ullamcorper vel, adipiscing vel enim. Phasellus hendrerit semper nisi quis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas nibh nunc, ac facilisis dui ultricies eget. Integer vestibulum ultricies diam, ut laoreet risus. Morbi suscipit venenatis tortor sit amet faucibus. Ut eu justo elementum, ultrices elit in, eleifend enim.
</div>
<div class="separation"></div>
<div id="studio" class="ancre"></div>
<div class="bloc_bio">
<div class="legende">STUDIO</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor dignissim mollis. Nam tempor tristique ultricies. Nullam blandit aliquet augue, et elementum elit. Morbi at enim ut magna semper varius. Curabitur purus turpis, condimentum at ullamcorper vel, adipiscing vel enim. Phasellus hendrerit semper nisi quis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas nibh nunc, ac facilisis dui ultricies eget. Integer vestibulum ultricies diam, ut laoreet risus. Morbi suscipit venenatis tortor sit amet faucibus. Ut eu justo elementum, ultrices elit in, eleifend enim.
</div>
<div class="separation"></div>
</div>
</div>
</div>
和JavaScript：
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
//-------------------------------------------------- # SCROLL ----------------------------------------------------//
$(document).ready(function(){
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-90
//--OFFSET--//
}, 2000, 'swing', function () {
window.location.hash = target;
});
});
});
我的问题是我需要动态生成此偏移量。每次单击菜单中的任何项目时，偏移量需要检查我的菜单（#stickyheader）是否粘在我的页面顶部，然后计算菜单的高度（#stickyheader），这将是偏移量（+10px填充底部）。如果我的菜单没有粘在顶部，所以显示div uppon 我的菜单 （#unstickyheader），偏移量应该是我的菜单的高度 （#stickyheader） +div 的高度 （#unstickyheader）。
我不知道如何计算两个div 的总高度，具体取决于是否显示第一个div，以及每次单击我的菜单时计算......
你怎么看？有没有其他解决方案？
我在这里做了一个JSfiddle，http://jsfiddle.net/uFq2k/359/
示例中的偏移量是 90，因此当我在显示我的div （#unstickyheader） 时单击菜单项时，我的菜单和我的部分标题之间的填充是正确的，例如"唱片"是正确的，但是当我单击之后的另一个链接时，假设传记，填充是大...应该在50左右...
我真的希望你理解我的问题，我很难解释，但如果你测试我的 JSfiddle，你应该理解这个问题。
非常感谢您的帮助！
我相信这就是你想要的：http://jsfiddle.net/B5dYv/
问题是 #stickyheader 在固定值和其他显示值之间切换。 这导致其他元素偏移量发生变化，因为固定有效地从 dom 堆栈中删除了元素，最终导致错误的滚动值。
我所做的不是在静态和固定之间切换 #stickyheader，而是现在是相对的和固定的。
此外，滚动问题的主要解决方法是通过检查 #stickyheader 的位置和高度来有条件地设置滚动偏移，从而获得您想要的动态偏移。
$(document).ready(function () {
$('a[href^="#"]').bind('click.smoothscroll', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
var offset;
if($('#stickyheader').css('position') == 'relative'){
offset = $('#stickyheader').outerHeight(true)*2;
}else{
offset = $('#stickyheader').outerHeight(true);
}
$('html, body').stop().animate({
'scrollTop': $target.offset().top - offset
//--OFFSET--//
}, 2000, 'swing', function () {
window.location.hash = target;
});
});
});
相关文章：
- 添加新数据时D3.JS条形图列偏移量
- 当偏移量改变时滚动顶部
- 引导数据偏移量底部
- 可以在调整窗口大小时重新调整stellar.js的元素偏移量
- 可滚动元素，如何在调整大小时更改顶部偏移量
- 库存图表-添加偏移以避免在边缘绘制点
- 使用JavaScript日期的任何时间的时区偏移量
- 在javascript中向本地时间戳添加时间戳偏移量
- 在three.js中向DeviceOrientationControls添加偏移量
- 为所有哈希链接/调用的滚动位置添加自动偏移量
- 使用 getUTCHours 并在 javascript 中添加 UTC 偏移量
- 锚导航与坚持到顶部菜单..需要向锚点添加动态偏移量
- 如何添加新的输入行并插入数据库并出现错误 未初始化的字符串偏移量:0 in
- 如何添加jQuery scrollTop偏移量
- 如何向jquery滚动条添加偏移量
- 向jQuery ScrollTo添加偏移量
- 向javascript添加偏移量
- Mathjax -为目标添加偏移量"eqref"链接方程时，有一个顶部固定菜单
- 在Javascript中为UTC日期添加偏移量
- 如何判断Date字符串是否包含已在Javascript中添加的时间偏移量
