使wordpress菜单粘上滚动

Question

您好我想在滚动时将wordpress菜单粘贴。

实际上，这就是我的意思

http://dev.thegabrielmethod.com/是主要菜单，暂时不粘

https://www.thegabrielmethod.com/这就是我希望菜单滚动的方式，请检查两个链接

这是我能做的事情

http://dev.thegabrielmethod.com/gabriel/

使用

.banner {
padding: 30px 50px;
}
.banner {
position: fixed;
width: 100%;
top: 0;
left: 0;
border-top: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
background: #fff;
vertical-align: top;
-webkit-box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
z-index: 999999;
}


.nav-bar-below.op-page-header {
margin-top : 100px;
    position: fixed;
    width: 100%;
    background: #155b9b;
    background: -moz-linear-gradient(top,#155b9b 0%,#155b9b 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#155b9b),color-stop(100%,#155b9b));
    background: -webkit-linear-gradient(top,#155b9b 0%,#155b9b 100%);
    background: -o-linear-gradient(top,#155b9b 0%,#155b9b 100%);
    background: -ms-linear-gradient(top,#155b9b 0%,#155b9b 100%);
    background: linear-gradient(top,#155b9b 0%,#155b9b 100%));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#155b9b', endColorstr='#155b9b',GradientType=0 );
}
.op-page-header .navigation a {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 19px;
    text-shadow: 0 1px 1px rgba(249, 249, 249, 0), 0 1px 1px rgba(0,0,0,.5)!important;
    text-rendering: optimizelegibility;
}

这不会给出滚动的外观，因为这个

https://www.thegabrielmethod.com/

有人可以帮忙吗

Answer 1

这是工作的jsfiddle：https://jsfiddle.net/cyp8ngck/1/

好的，这就是我的所作所为 我创建了2个不同的菜单：
1.将与页面一起滚动的普通菜单 2.当普通菜单在视口外滚动并且不再可见时，将显示的粘性菜单。

两种菜单类型的CSS如下：

/* common CSS styling for both menus to keep the code clean */
    .menu, .sticky-menu {
      display: block;
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      background: #2e2e2e;
      color: #ffffff;
      padding: 15px 0px;
    }

/* code for the sticky menu only */
    .sticky-menu {
      background: #cccccc;
      color: #2e2e2e;
      position: fixed;
      z-index: 9999;
      left:0;
      right:0;
      top:0;
      transform: translateY(-100%);
      transition: all .3s ease;
    }

正如您所见，粘性菜单被拉到视口窗口之外并保持隐藏，直到页面滚动并且隐藏了法线。

现在我只是用粘滞菜单切换这个CSS类： （它拉下并拉起粘滞菜单）

.pull-sticky-menu {
  transform: translateY(0%);
  transition: all .3s ease;
}

通过检测jQuery中的菜单高度：

$(document).scroll(function() {
  var scrollheight = $(this).scrollTop();
  var menuheight = $(".menu").height();
  if (scrollheight > menuheight) {
    $('.sticky-menu').addClass("pull-sticky-menu");
  } else {
    $('.sticky-menu').removeClass("pull-sticky-menu");
  }
});

以下是代码段：

$(document).scroll(function() {
  var scrollheight = $(this).scrollTop();
  var menuheight = $(".menu").height();
  if (scrollheight > menuheight) {
    $('.sticky-menu').addClass("pull-sticky-menu");
  } else {
    $('.sticky-menu').removeClass("pull-sticky-menu");
  }
});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
}

.container {
  background: #ffffff;
}

.menu,
.sticky-menu {
  display: block;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  background: #2e2e2e;
  color: #ffffff;
  padding: 15px 0px;
}

.sticky-menu {
  background: #cccccc;
  color: #2e2e2e;
  position: fixed;
  z-index: 9999;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  transition: all .3s ease;
}

.pull-sticky-menu {
  transform: translateY(0%);
  transition: all .3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="sticky-menu">
    THIS IS STICKY MENU
  </div>

  <div class="menu">
    THIS IS NORMAL MENU
  </div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
    est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
    lorem, sed auctor tellus efficitur id.
  </p>

  <p>
    Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
    non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
    nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
  </p>

  <p>
    Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
    in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
    libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
  </p>

  <p>
    Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
    sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
    sem, vestibulum at felis et, finibus egestas sem.
  </p>

  <p>
    Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
    Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
    ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
    est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
    lorem, sed auctor tellus efficitur id.
  </p>

  <p>
    Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
    non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
    nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
  </p>

  <p>
    Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
    in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
    libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
  </p>

  <p>
    Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
    sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
    sem, vestibulum at felis et, finibus egestas sem.
  </p>

  <p>
    Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
    Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
    ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
  </p>

</div>

请告诉我这是否有帮助：）