如何删除粘性标题并使其保持静态

Posted 2023-03-16

【中文标题】如何删除粘性标题并使其保持静态

【英文标题】：how to remove sticky header and keep it static

【发布时间】：2015-02-05 11:30:17

【问题描述】：

我目前正在这个网站上工作 - http://andersontreesurgery.co.uk/。我使用了 html5 up 模板，并且该模板已经有一个粘性标题。然而，当网站缩小时，标题和横幅之间会产生一个看起来很糟糕的间隙。此外，我只是不希望标题向下移动并始终保持在所有内容的顶部。

我仍然喜欢滑出的移动菜单，但是如何在不删除任何其他功能的情况下停止粘性标题？

谢谢，

杰玛

【问题讨论】：

您应该编辑您的问题，为您正在使用的 HTML/CSS 库提供更多详细信息（也是一两个链接）。

这主要是一个 css 问题.. 并逐渐进入 UI/UX 领域.. 至少需要一些代码来回答.. 但您的问题需要更具体

检查 position: fixed 和 z-index: 9999 的标题。

【参考方案1】：

这会有所帮助

$(function()
  $(window).scroll(function()
    var winTop = $(window).scrollTop();
    if(winTop >= 30)
      $("body").addClass("sticky-header");
    else
      $("body").removeClass("sticky-header");
    
  )
)

position:fixed 
z-index:9999

<!-- begin snippet: js hide: false -->

/* For Extra styling try this */
body.sticky-header
    padding-top: 100px;
    header
        height: 60px;
        h1
            @include scale(0);
        
    

【讨论】：

您好，谢谢您的回复。我会把这段代码放在哪里？我没有functions.php文件。

嗨 Gemma，希望你做得很好......这只是一个 JS 文件正在执行转换。所以忘记functions.php。根据第一个代码块创建 JS 文件并添加前面提到的 CSS 位置属性，它应该可以工作。