我一直在努力使一些JQuery代码在新站点上工作。它涉及在通过滚动点后将导航div固定到窗口顶部。
调整页面大小时,有2个div会更改高度,并且只有在@media(最小宽度:768px)时,才应执行整个操作。
这是我网站顶部的基本结构:
<div id="x-topbar-wrap"></div>
<div id="nav-top-wrap">
<div id="nav-top-inner"></div>
</div>
<div class="x-slider-container"></div>
我想创建两个变量,该变量在调整窗口大小时更新:
var topbarHeight = $('#x-topbar-wrap').outerHeight();
var navtopHeight = $('#nav-top-wrap').outerHeight();
...并在滚动窗口时使用它们:
$(window).scroll(function() {
if ($(this).scrollTop() >= topbarHeight) {
$('#nav-top-inner').addClass('fixed max');
$('.x-slider-container').css('margin-top', navtopHeight + 'px');
} else {
$('#nav-top-inner').removeClass('fixed max');
$('.x-slider-container').css('margin-top', '0px');
}
});
“固定”类别如下,因此在移动设备上被禁用。
@media (min-width: 768px) {
#nav-top-inner.fixed {
position: fixed;
top: 0;
z-index:1050;
}
}
.x-slider-container上的margin-top也应在移动设备上禁用,但是由于它的大小是可变的,所以我试图像这样进行媒体查询检查:
if ($("#nav-top-inner").css('position') == 'fixed') {
$('.x-slider-container').css('margin-top', navtopheight + 'px');
} else {
$('.x-slider-container').css('margin-top', '0px');
}
我非常感谢您提供的一些帮助,尤其是在页面调整大小时两个变量更新的地方。
我没有调整大小就可以很好地工作,但是Chrome和Safari奇怪地遇到了不同的结果。
这是网站:http://www.pricestudios.co.uk/
谢谢,
山姆
最佳答案
这就是我最终得到的结果,并且似乎运行良好。任何想法/建议清理它,将不胜感激。
jQuery(document).ready(function($) {
setTimeout(function(){
var topbarHeight, navtopHeight;
function setSizes() {
topbarHeight = $('#x-topbar-wrap').outerHeight();
navtopHeight = $('#nav-top-wrap').outerHeight();
}
setSizes();
$(window).resize(setSizes);
$(window).bind('scroll', function() {
if ($(window).scrollTop() >= topbarHeight) {
$('#nav-top-inner').addClass('fixed max');
if ($("#nav-top-inner").css('position') == 'fixed') {
$('.x-slider-container').css('margin-top',
navtopHeight + 'px');
} else {
$('.x-slider-container').css('margin-top',
'0px');
}
} else {
$('#nav-top-inner').removeClass('fixed max');
$('.x-slider-container').css('margin-top', '0px');
}
});
},1000);
});
关于javascript - jQuery固定顶部导航,变量在调整大小时更改,在移动设备上禁用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30934037/