HTML 位置：固定可变高度页眉和页内锚点

Posted 2023-02-22

【中文标题】HTML 位置：固定可变高度页眉和页内锚点

【英文标题】：HTML position:fixed variable-height page header and in-page anchors

【发布时间】：2016-07-04 03:22:43

【问题描述】：

我已经成功设计了页面锚点，它会在第一次点击时补偿固定的标题高度，代码如下：

<p id="anchorid" style="padding-top: 287px; margin-top: -287px; width: 20px;">
   FILLER TEXT
</p>

我遇到的问题是，当您滚动时，我的标题会缩小，因此一旦您通过锚点单击页面，下次您在该页面上单击该页面的锚点时，填充会超出-补偿（因为它设置为初始页眉高度）并且该部分被带到页面的中间而不是顶部。我希望做的是将锚定填充动态设置为标题的高度，以便它始终将部分带到顶部，但我很遗憾地迷失了如何做到这一点。

有没有办法使用锚点（id="filler"）让浏览器滚动到某个点，具体取决于标题的高度，使用 CSS？

这里解决了类似的问题，但它们的标题不会改变大小：html position:fixed page header and in-page anchors

【问题讨论】：

无法回答您。首先，你在做一个奇怪的把戏。其次，没有向您解释您的需求，也没有提供有效的示例。在***中，这类问题是题外话。阅读帮助，改进问题，也许有人可以帮助您。

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及重现它所需的最短代码在问题本身。没有清晰的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。

也许创建一个 jsFiddle 来演示这个问题？

@riversnj ：查看我编辑的答案，如果这就是您要找的，请告诉我。祝你好运！

【参考方案1】：

编辑答案：

这是我用于固定标头的代码，该标头在使用 jQuery 使用 smouth 滚动滚动到锚点时负责处理偏移量。

这是一个插图：https://jsfiddle.net/mmb5k7xb/1/

要查看脚本对不同高度的反应，只需在 html 部分更改菜单高度的值。

希望对你有帮助。

<script type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function($) 

var menu_height = $('.menu').height(); // calulate the height of the menu

(function(document, history, location) 
  var HISTORY_SUPPORT = !!(history && history.pushState);

  var anchorScrolls = 
    ANCHOR_REGEX: /^#[^ ]+$/,
    OFFSET_HEIGHT_PX: menu_height, // Set the offset with the dynamic value

    /**
     * Establish events, and fix initial scroll position if a hash is provided.
     */
    init: function() 
      this.scrollIfAnchor(location.hash);
      $('body').on('click', 'a', $.proxy(this, 'delegateAnchors'));
    ,

    /**
     * Return the offset amount to deduct from the normal scroll position.
     * Modify as appropriate to allow for dynamic calculations
     */
    getFixedOffset: function() 
      return this.OFFSET_HEIGHT_PX;
    ,

    /**
     * If the provided href is an anchor which resolves to an element on the
     * page, scroll to it.
     * @param  String href
     * @return Boolean - Was the href an anchor.
     */
    scrollIfAnchor: function(href, pushToHistory) 
      var match, anchorOffset;

      if(!this.ANCHOR_REGEX.test(href)) 
        return false;
      

      match = document.getElementById(href.slice(1));

      if(match) 
        anchorOffset = $(match).offset().top - this.getFixedOffset();
        $('html, body').animate( scrollTop: anchorOffset);

        // Add the state to history as-per normal anchor links
        if(HISTORY_SUPPORT && pushToHistory) 
          history.pushState(, document.title, location.pathname + href);
        
      

      return !!match;
    ,

    /**
     * If the click event's target was an anchor, fix the scroll position.
     */
    delegateAnchors: function(e) 
      var elem = e.target;

      if(this.scrollIfAnchor(elem.getAttribute('href'), true)) 
        e.preventDefault();
      
    
  ;

    $(document).ready($.proxy(anchorScrolls, 'init'));
)(window.document, window.history, window.location);
);
</script>