Jquery和响应式答案

【问题标题】：Jquery and responsiveJquery和响应式
【发布时间】：2016-03-07 22:10:40
【问题描述】：

我的网站上有一个scrollTo 锚链接脚本，偏移量为-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;
    });
});

【问题讨论】：

让高度动态化？ var navigationHeight = $(nav).height();然后减去变量作为高度？
sometimes 是什么意思？你的导航栏改变了它的高度？
是的，取决于屏幕分辨率，导航栏会改变它的高度！
哦，我忘了说，我不太了解js，我知道如何适配脚本，但我不知道如何在其中添加var或其他东西:-(（没学过到）

标签： javascript jquery responsive-design media-queries

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

【讨论】：

matchMedia 是我今天学到的，这应该是公认的答案。
谢谢老兄，我找到了如何使用它！非常感谢！

【解决方案2】：

您可以只读出不同的解决方案，但也许使用媒体/css 查询会更简单。要在 JS 中获取屏幕分辨率，请使用 screen 对象：

screen.width;
screen.height;

所以你可以检查高度，然后做不同的事情。

【讨论】：

感谢您的评论，但我忘了说，我不太了解js，我知道如何适应脚本，但我不知道如何在其中添加var或其他东西:-( （从没学过），我只有 html/css 知识！你能向我解释一下我应该怎么做吗？谢谢

【解决方案3】：

您可以使用以下内容来测试窗口元素上的特定宽度。

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

【讨论】：

@grooves 您正在检查 window.width，它与 OP 要求的屏幕分辨率不同。
我意识到这一点，但屏幕分辨率对他想要的没有任何意义。阅读：css-tricks.com/screen-resolution-notequalto-browser-window
另外，@zzzzBov 上面的答案比我的要好，请检查一下。

【解决方案4】：

谢谢大家的回答！

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

块引用

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

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

【讨论】：