我一直在努力使一些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/

10-12 12:50
查看更多