Question

我正在制作一个单页网站，中间顶部有粘性导航，宽度约为1000像素，高度约为20-25像素，现在我还包括一个流畅的滚动功能，但我的问题是每当页面滚动到它的活动页面，标题隐藏在粘性导航下，如何获得粘性导航底部的偏移量？感谢。

这是js代码btw：

$('a').click(function(e) {
        var target = $(this).attr('href');
        e.preventDefault();

        $('html,body').animate({
            scrollTop: $(target).offset().top
        }, 800, 'easeInOutCirc');
    });

Answer 1

保持当前代码不变的最简单方法是将偏移量添加到网站顶部，方法是在.top之后添加所需的偏移值，如下所示：

$('a').click(function(e) {
    var target = $(this).attr('href');
    e.preventDefault();

    $('html,body').animate({
        scrollTop: $(target).offset().top - 20
    }, 800, 'easeInOutCirc');
});

希望这个答案不如最后一个复杂。：）

Answer 2

jQuery的.position()方法将为您提供与页面相关的元素的顶部和左侧偏移量。因此，您只需要将粘性导航的.outerHeight()添加到.position().top值。

以下是一个示例：http://jsfiddle.net/NUfaZ/1/

当您向下滚动页面时，您会看到它的位置已更新。

Answer 3

请参阅https://codepen.io/pikeshmn/pen/mMxEdZ

方法：我们使用 document.getElementById（'header'）获得固定导航的高度.offsetHeight 并将滚动偏移到此值。

var jump=function(e){  

e.preventDefault();                        //prevent "hard" jump
  var target = $(this).attr("href");       //get the target

      //perform animated scrolling
      $('html,body').animate(
        {
          scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5  //get top-position of target-element and set it as scroll target
        },1000,function()                  //scrolldelay: 1 seconds
        {
          location.hash = target;          //attach the hash (#jumptarget) to the pageurl
        });
      }

  $(document).ready(function()
  {
    $('a[href*="#"]').bind("click", jump); //get all hrefs
    return false;
  });

P.S：

它包含标题和目标之间的5个像素差异
滚动效果并不难，相当顺畅;平滑滚动

Jquery平滑滚动偏移

3 个答案: