Question

我使用一个简单的脚本来粘贴导航标题，但我想知道如何为较小的屏幕添加条件。所以这是脚本：

$(document).ready(function() {
    var aboveHeight = $('#top_menu').outerHeight();
    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
            $('.menu').addClass('fixed').css('top','0').next().css('padding-top','100px');
        } 
        else {
            $('.menu').removeClass('fixed').next().css('padding-top','30px');
        }
    });
});

我想将addClass padding-top（在第5行）的值从100px更改为30px，对于小于600px宽度的屏幕。类似的东西：

if (window.width <= 600)

希望您理解我的要求，因为我的英语不是很好：p提前感谢大家的帮助。

Answer 1

您可以根据window.innerWidth值存储和设置padding-top值，如下所示：

$(document).ready(function() {
  var aboveHeight = $('#top_menu').outerHeight(),
      windowWidth = window.innerWidth,
      menuPaddingTop = '100px';

  // Add additional statements to this if needed
  if (windowWidth <= 600) {
    menuPaddingTop = '30px';
  }

  $(window).scroll(function(){
      if ($(window).scrollTop() > aboveHeight){
          $('.menu').addClass('fixed').css('top','0').next().css('padding-top', menuPaddingTop);
      } 
      else {
          $('.menu').removeClass('fixed').next().css('padding-top','30px');
      }
  });
});

为滚动功能添加响应条件

1 个答案: