javascript - Jquery 和响应式

Question

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

$(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;
    });
});

Answer 1

最简单的通用解决方案是将偏移量基于导航栏的高度:

$('.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() 它可能与媒体查询不完全匹配，具体取决于某些浏览器是否显示滚动条。