使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> 

讓我知道這是否有幫助:)