添加媒体查询以偏移滚动 jQuery

Question

我正在构建一个网站，该网站的导航可以跳转到网站不同页面上的锚点。为了补偿阻塞内容顶部的粘性 header，我找到了这个代码片段。

它可以工作，但只能在桌面上使用。我需要调整平板电脑和智能手机的价值，但由于我不知道 jQuery 我完全没有头绪。

我需要一个 min-width: 1025px、max-width: 1024px 和 max-width: 767px 来调整不同 header 尺寸的高度。

如何将这些媒体查询添加到代码段中？

 jQuery(document).ready(function() {
    var target = window.location.hash;

   // only try to scroll to offset if target has been set in location hash
       if (target != '') {
   var $target = jQuery(target);
jQuery('html, body').stop().animate({
  'scrollTop': $target.offset().top - 155
}, 900, 'swing', function() {
  window.location.hash = target - 40;
});
} 
});

Answer 1

您可以动态读取 header 的身高。

只需将您的 155 替换为 parseInt($('.header').css('height'), 10)。显然 .header 是我例子中的选择器，如果你的 header 有一个 ID 使用 #YouIDName 如果它有一个 class 像我的例子，使用 .YourClassName .

要重复查看此示例，请单击 Run code snippet。

jQuery(document).ready(function() {
  var target = window.location.hash;
  
  
  // Only for test on Stack Overflow:
  target = '#myTarget'; // Force target for test
  $('.header').css('height', (Math.floor(Math.random() * 81) + 20) + 'px'); // Random height of header from 20 to 100
  $('.header').text('Current header height is ' + $('.header').css('height')); // Print header height
  // End rows for test //
  
  
  
  // only try to scroll to offset if target has been set in location hash
  if (target != '') {
    var $target = jQuery(target);
    jQuery('html, body').stop().animate({
      'scrollTop': $target.offset().top - parseInt($('.header').css('height'), 10) // Read the height of your header
    }, 900, 'swing', function() {
      window.location.hash = target - 40;
    });
  }
});

.header {
  position: sticky;
  top:0;
  background-color:red;
  width:100%;
  height: 155px;
}

.content {
  display: inline-block;
  background-color:blue;
  width:100%;
  height: 600px;
}

a {
  display: inline-block;
  background-color:yellow;
  width:100%;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="header">My header</div>
<div class="content">Random content</div>
<a id="myTarget" href="#myTarget">Target</a>
<div class="content">Random content</div>

编辑

无论如何，不知道你的布局的确切功能，我通过 javascript 添加媒体查询解决方案。

相关部分：

let headerHeight = 155;

if (window.matchMedia("(max-width: 767px)")) {
  // Less then 767
  headerHeight = 50;
  console.log('header: 50 // max-width: 767px');
} else if (window.matchMedia("(max-width: 1024px)")) {
  // From 768 and 1024
  headerHeight = 100;
  console.log('header: 100 // max-width: 1024px');
} else {
  // Greater than 1024 (headerHeight = 155).
  //    You can remove this else.
  console.log('header: 155');
}

jQuery(document).ready(function() {
  var target = window.location.hash;


  // Only for test on Stack Overflow:
  target = '#myTarget'; // Force target for test
  
  // Force header height based on media query
  if (window.matchMedia("(max-width: 767px)")) {
    $('.header').css('height', '50px');
  } else if (window.matchMedia("(max-width: 1024px)")) {
    $('.header').css('height', '100px');
  }
  // End rows for test //



  // only try to scroll to offset if target has been set in location hash
  if (target != '') {

    let headerHeight = 155;

    if (window.matchMedia("(max-width: 767px)")) {
      // Less then 767
      headerHeight = 50;
      console.log('header: 50 // max-width: 767px');
    } else if (window.matchMedia("(max-width: 1024px)")) {
      // From 768 and 1024
      headerHeight = 100;
      console.log('header: 100 // max-width: 1024px');
    } else {
      // Greater than 1024 (headerHeight = 155).
      //    You can remove this else.
      console.log('header: 155');
    }


    var $target = jQuery(target);
    jQuery('html, body').stop().animate({
      'scrollTop': $target.offset().top - headerHeight
    }, 900, 'swing', function() {
      window.location.hash = target - 40;
    });
  }
});

.header {
  position: sticky;
  top: 0;
  background-color: red;
  width: 100%;
  height: 155px;
}

.content {
  display: inline-block;
  background-color: blue;
  width: 100%;
  height: 600px;
}

a {
  display: inline-block;
  background-color: yellow;
  width: 100%;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="header">My header</div>
<div class="content">Random content</div>
<a id="myTarget" href="#myTarget">Target</a>
<div class="content">Random content</div>

添加媒体查询以偏移滚动 jQuery

Add media queries to offset scroll jQuery

jquery

scroll

offset

media-queries