[英]stick to top menu Gap
I'm using a js on my website (with wordpress) to get a stick to top menu when scrolling my page. 我在网站上使用js(使用wordpress)来滚动页面时获得顶部菜单的提示。 it works, when scrolling my header sticks on top, but there's a gap in my #entry content.
它可以正常工作,当滚动时,我的标题会停留在顶部,但是#entry内容中存在间隙。 like on this example : http://www.amsbooking.fr/mattieumoreau/artists/amine_edge_and_dance/
像这个例子一样: http : //www.amsbooking.fr/mattieumoreau/artists/amine_edge_and_dance/
when scrolling and when my header sticks to top, the tittle "amine edge and dance" dissapears under the header, it is not fluid... I guess there's a padding missing or something in my JS but I can't find why... 当滚动并且当我的页眉停留在顶部时,标题下的标题“胺边缘和舞蹈”消失了,这不是流畅的……我想我的JS中缺少填充或其他内容,但是我找不到原因。 。
here is my css : 这是我的CSS:
#stickyheader { width: 100%;padding-top:10px;top: 0;z-index: 1000;padding-bottom: 10px;line-height: 24px;position:relative;background-color: #f8f8f8;}
#unstickyheader {height:auto;}
and my JS : 和我的JS:
$(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: 'relative'
});
}
});
});
here is jsfiddle : http://jsfiddle.net/2UCH4/ 这是jsfiddle: http : //jsfiddle.net/2UCH4/
can anybody help me with this ? 有人可以帮我吗?
thanks a lot for your help ! 非常感谢你的帮助 !
Since you are setting that element with position:fixed
the space that was fill by the element is now available and the next container just switch up. 由于您使用
position:fixed
设置了该元素,因此该元素填充的空间现在可用,并且下一个容器将被切换。 To fix that you can correct the space with margin-top
: 要解决此问题,您可以使用
margin-top
纠正空间:
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
$('#stickyalias').css('display', 'block');
var mT = $('#stickyheader').css('height'); /*Add this*/
$('#stickyheader').next('.post').css('marginTop', mT); /*Add this*/
}else{
$('#stickyheader').css({
position: 'relative'
});
$('#stickyheader').next('.post').css('marginTop', '0'); /*Add this*/
}
});
Check this Working Demo 检查此工作演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.