jquery和响应式

我的网站上有一个scrollTo锚链接脚本，偏移量为-35px，因为我的导航栏的高度是35px。有时在不同的分辨率下（智能手机或平板电脑），我需要更改偏移值。我怎样才能在这个脚本中做到这一点？jquery和响应式

$(document).ready(function() { 
    $('.scrollTo').click(function() { // Au clic sur un élément 
     var page = $(this).attr('href') ; // Page cible 
     var speed = 300; // Durée de l'animation (en ms) 
     $('html, body').animate({ scrollTop: $(page).offset().top - 35 }, speed); // Go 
     return false; 
    }); 
});

来源

2016-03-07 Orko

使高度动态？ 'var navigationHeight = $（nav）.height（）;'然后减去变量作为高度？ – Josh

有时候是什么意思？你的导航栏改变了它的高度？ –

是取决于屏幕分辨率，导航栏更改其高度！ – Orko

最简单通用的解决方案是立足您在导航栏的高度偏移：

$('.scrollTo').click(function() { // Au clic sur un élément 
    var page = $(this).attr('href') ; // Page cible 
    var speed = 300; // Durée de l'animation (en ms) 
    var height = $(...nav bar selector...).height(); 
    $('html, body').animate({ scrollTop: $(page).offset().top - height }, speed); // Go 
    //               ^^^^^^ 
    return false; 
});

但是，如果您需要调整您的JS基于媒体查询，您应该使用matchMedia：

if (matchMedia('(min-width: 768px)').matches) { 
    ...larger screens... 
} else { 
    ...smaller screens... 
}

这样做的好处是：它会正好匹配在CSS中使用的媒体查询。如果您拨打$(window).width()，它可能不完全匹配媒体查询，具体取决于是否显示某些浏览器的滚动条。

来源

2016-03-07 13:53:36 zzzzBov

米atchMedia是我今天学到的东西，这应该是公认的答案。 – groooves

感谢兄弟我发现如何使用它！非常感谢你！ – Orko

你可以读出不同的解决方案，但也许使用媒体/ css查询它更简单。要获得JS屏幕分辨率使用屏幕对象：

screen.width; 
screen.height;

因此，您可以检查高度，然后做不同的事情。

来源

2016-03-07 13:47:50 Kordi

欣赏您的评论，但我忘了提及，我不知道js，我知道如何适应脚本，但我不知道如何添加var或其他东西:-(（从未学会），我只有html/css知识！你能向我解释我应该怎么做到这一点吗？谢谢 – Orko

您可以使用以下命令来测试窗口元素的特定宽度。

if($(window).width() > x) { 
    // Do something. 
} else { 
    // Do something else. 
}

你可以在你的点击回调中使用这个来检查当时窗口的状态。

在你的代码，它可能是：

$(document).ready(function() { 
    $('.scrollTo').click(function() { // Au clic sur un élément 
    var page = $(this).attr('href') ; // Page cible 
    var speed = 300; // Durée de l'animation (en ms) 

    var topOffset = 35; 
    if($(window).width() > 350) 
    { 
     topOffset = 20; 
    } 
    $('html, body').animate({ scrollTop: $(page).offset().top - 35 }, speed); // Go 
    return false; 
    }); 
});

来源

2016-03-07 13:47:59 groooves

@grooves你正在检查window.width，这是一个不同于OP要求的屏幕分辨率 – Kordi

我意识到，但屏幕分辨率不意思是任何他想要的东西。阅读此：https://css-tricks.com/screen-resolution-notequalto-browser-window/ – groooves

此外，@zzzzBov上面的答案比我更好，检查一个。 – groooves

谢谢大家的回答！

对于那些谁需要知道，这就是答案：

块引用

他最简单的一种通用的解决方案是立足您在导航栏的高度偏移：

$('.scrollTo').click(function() { // Au clic sur un élément 
var page = $(this).attr('href') ; // Page cible 
var speed = 300; // Durée de l'animation (en ms) 
var height = $(...nav bar selector...).height(); 
$('html, body').animate({ scrollTop: $(page).offset().top - height }, speed); // Go 
                  ^^^^^^ 
return false; 
});

但是如果你需要根据媒体查询调整你的JS，你应该使用matchMedia：

if (matchMedia('(min-width: 768px)').matches) { 
...larger screens... 
} else { 
...smaller screens... 
}

这具有与CSS中使用的媒体查询完全匹配的优点。如果您调用$（window）.width（），它可能不完全匹配媒体查询，具体取决于是否显示某些浏览器的滚动条。

来源

2016-03-07 14:02:39 Orko

jquery和响应式

回答

相关问题