时间戳

首页 > 解决方案 > 如何使用 CSS/Boostrap 和 Jquery 使粘性页眉和页脚具有箭头按钮以显示/隐藏内容为 Google Adsense

jquery - 如何使用 CSS/Boostrap 和 Jquery 使粘性页眉和页脚具有箭头按钮以显示/隐藏内容为 Google Adsense

问题描述

请帮我制作带有箭头按钮的粘性页眉和页脚，以使用 CSS/Boostrap 和 Jquery 将内容显示/隐藏为 Google Ads

Demo Sticky Footer 单击左上角的向下箭头按钮隐藏内容并显示向上箭头按钮。当我单击向上箭头按钮时，页脚的内容将再次显示

文本

标签： jquerycss

解决方案

这是一个简单但有效的示例，可以帮助您入门。如果要制作粘性页眉/页脚，则必须在 css 中使用以下内容：

 position: fixed;


$().ready(function(){
  $("button").click(function(){
    if ($("#header").css("visibility") == "hidden")
      {
        $("#header").css("visibility", "visible").css("opacity", 1)
      }
    else  { $("#header").css("visibility", "hidden").css("opacity", 0) }
  })
})
#header {
  width: 100%;
  height: 50px;
  background-color: #E8E8E8;
  transition:visibility 0.3s linear,opacity 0.3s linear;
  position: fixed;
}

body {
  background-color: gray;
  height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Show/Hide</button>
<div id="header"></div>

推荐阅读