Javascript Jquery和responsive

我的网站上有一个

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

---

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

screen.width;
screen.height;

---

因此，您可以检查高度，然后执行不同的操作。

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

screen.width;
screen.height;

---

因此，您可以检查高度，然后执行不同的操作。

您可以使用以下方法测试窗口元素的特定宽度

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

您可以在click回调中使用此选项来检查此时窗口的状态

在您的代码中，它可以是：

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

---

您可以使用以下方法测试窗口元素的特定宽度

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

您可以在click回调中使用此选项来检查此时窗口的状态

在您的代码中，它可以是：

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

---

最简单的一般解决方案是根据导航条的高度进行偏移：

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

$('.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，则应使用：

---

这样做的好处是，它将与CSS中使用的媒体查询完全匹配。如果调用

$（window）.width（）

它可能与媒体查询不完全匹配，这取决于某些浏览器是否显示滚动条。

最简单的通用解决方案是根据导航条的高度确定偏移量：

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

$('.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，则应使用：

---

这样做的好处是，它将与CSS中使用的媒体查询完全匹配。如果调用

$（window）.width（）

它可能与媒体查询不完全匹配，这取决于某些浏览器是否显示滚动条。

谢谢大家的回答

对于那些需要了解的人，以下是答案：

大宗报价

最简单的一般解决方案是将偏移量基于导航条的高度：

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

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

谢谢大家的回答

对于那些需要了解的人，以下是答案：

大宗报价

最简单的一般解决方案是将偏移量基于导航条的高度：

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

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

是否使高度动态<代码>变量navigationHeight=$（nav）.height（）然后减去变量作为高度？有时

意味着什么？您的导航栏会更改其高度？是的，根据屏幕分辨率，导航栏会更改其高度！哦，我忘了提到，我不太懂js，我知道如何调整脚本，但我不知道如何在脚本中添加var或其他东西：-（（从未学会）使高度动态？
var navigationHeight=$（nav.height（））
然后减去变量作为高度？有时
意味着什么？你的导航栏会改变它的高度？是的，根据屏幕分辨率，导航栏会改变它的高度！哦，我忘了提到，我不太懂js，我知道如何调整脚本，但我不知道如何在其中添加var或其他东西：-（（从未学会）@你要检查的是window.width，这是一个不同于OP要求的屏幕分辨率的槽。我知道，但屏幕分辨率并不意味着他想要什么。读一下：另外，上面的@zzzzBov答案比我的好，检查一下。@groovs你要检查window.width，这是一个不同于屏幕分辨率的槽我知道，但屏幕分辨率并不代表他想要的任何东西。请阅读以下内容：另外，上面的@zzzzBov答案比我的好，请检查一下。感谢您的评论，但我忘了提到，我不太懂js，我知道如何调整脚本，但我不知道如何在其中添加var或其他内容：-（（从未学过），我只有html/css知识！你能给我解释一下我应该怎么做吗？谢谢你的评论，但我忘了提到，我不太懂js，我知道如何修改脚本，但我不知道如何在其中添加var或其他东西：-（（从未学过），我只有html/css知识！你能给我解释一下我应该怎么做吗？感谢matchMedia是我今天学到的东西，这应该是公认的答案。谢谢老兄，我发现了如何使用它！非常感谢！matchMedia是我今天学到的东西，这应该是公认的答案。谢谢老兄，我发现了如何使用它用这个！非常感谢！