偏移此滚动元素功能

Question

有没有一种方法可以抵消此滚动功能，以便在滚动到的元素上方停止80px？

我有一个固定的标题，它的高度为80px，当我滚动到一个元素时，标题遮住了一些内容。

function filterPath(string) { 
    return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
    } 
    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('html', 'body'); 

    $('a[href*=#]').each(function() { 
     var thisPath = filterPath(this.pathname) || locationPath; 
     if ( locationPath == thisPath 
     && (location.hostname == this.hostname || !this.hostname) 
     && this.hash.replace(/#/,'')) { 
     var $target = $(this.hash), target = this.hash; 
     if (target) { 
      var targetOffset = $target.offset().top; 
      $(this).click(function(event) { 
      event.preventDefault(); 
      $(scrollElem).animate({scrollTop: targetOffset}, 700, function() { 
       location.hash = target; 
      }); 
      }); 
     } 
     } 
    }); 

    // use the first element that is "scrollable" 
    function scrollableElement(els) { 
     for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
     var el = arguments[i], 
      $scrollElement = $(el); 
     if ($scrollElement.scrollTop()> 0) { 
      return el; 
     } else { 
      $scrollElement.scrollTop(1); 
      var isScrollable = $scrollElement.scrollTop()> 0; 
      $scrollElement.scrollTop(0); 
      if (isScrollable) { 
      return el; 
      } 
     } 
     } 
     return []; 
    } 

Answer 1

你应该改变：

var targetOffset = $target.offset().top;

到

var targetOffset = $target.offset().top - 80;

或者更好的

var targetOffset = $target.offset().top - $('#your-header-id').outerHeight();

这应该做的窍门，并应该更健壮一点，如果你改变标题的高度。

编辑：

为了避开你的问题，你应该改变每个部分的ID，以section-about/section-services /等等，那么你将不得不做一些字符串替换：

var targetId = $target.attr('id').replace('#','#section-'); 

var targetOffset = $(targetId).offset().top - 80; 

$target此刻会在网址中散列，所以#about。上面的代码将用#section-代替#。然后，您将可以像平常一样继续进行，获得$('#section-about')的顶部offset()。