【问题标题】: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: fixedz-index: 9999 的标题。

标签: javascript css html scroll sticky


【解决方案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 位置属性,它应该可以工作。
猜你喜欢
  • 1970-01-01
  • 2017-06-30
  • 1970-01-01
  • 1970-01-01
  • 2019-12-31
  • 1970-01-01
  • 2019-08-10
  • 1970-01-01
  • 2023-02-25
相关资源
最近更新 更多