你好，我正在尝试使 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/
谁能帮忙
最佳答案
这是工作的 jsfiddle:https://jsfiddle.net/cyp8ngck/1/
好的，这就是我所做的。
我创建了 2 个不同的菜单:
1. 随页面滚动的普通菜单。
2. 当普通菜单滚动到视口(viewport)外不再可见时，将显示一个粘性菜单。
两种菜单类型的 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;
}
如您所见，粘性菜单被拉出视口(viewport)窗口并保持隐藏状态，直到页面滚动且法线被隐藏。
现在我只是用粘性菜单切换这个 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>如果这有帮助，请告诉我:)
关于javascript - 使wordpress菜单粘在滚动条上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43168817/