[英]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;}
我的html:
<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上限(#unstickyheader),则偏移量应为菜单的高度(#stickyheader)+ div的高度(#unstickyheader)。
我不知道如何计算两个div的总高度,这取决于是否显示第一个div,以及如何计算菜单中的每次单击...
你对那个怎么想的 ? 还有其他解决方案吗?
我在这里制作了JSfiddle, http://jsfiddle.net/uFq2k/359/
该示例中的偏移量为90,因此当我在显示div(#unstickyheader)时单击菜单项时,菜单和节标题之间的填充是正确的,例如“ discography”,但是当我单击此后的另一个链接,比如传记,填充物很大...应该在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;
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.