[英]Can't get my menu to work with “StickyPanel”
我对创建网站有点陌生,请耐心等待。
我刚刚开始一个新项目,我想要一个滚动菜单,然后在到达页面顶部时停止。 我找到了一个非常酷的JavaScript插件,名为"StickyPanel"
( https://code.google.com/p/sticky-panel/ ),但无法配合使用。 显然没有说明,在其他地方也找不到任何有用的信息。
代码很简单:
<script src="js/jquery.js"></script>
<script src="js/jquery.stickyPanel.min.js"></script>
<!-----Sticky Panel------>
<script type="text/javascript">
$().ready(function () {
var stickyPanelOptions = {
afterDetachCSSClass: "",
savePanelSpace: true
};
$("header").stickyPanel(stickyPanelOptions);
});
</script>
<script>
$(document).ready(function(){
$(".nav-button").click(function () {
$(".nav-button,.menu").toggleClass("open");
});
});
</script>
<!-----Sticky Panel------>
然后,我创建了一个名为“ header”的div
类,然后设置了标题菜单的样式。 我无法使用JavaScript对标头执行任何操作。 我究竟做错了什么?
$("header").stickyPanel(stickyPanelOptions);
您向Jquery询问elemet标头您需要向jquery询问类标头=>
$(".header").stickyPanel(stickyPanelOptions);
了解有用的选音器!
<header> is a html5 element, support by almost all browser but dont forget display: block in css!
使用$(".header")
而不是$("header")
选择div
如果您不想使用此插件,则还有另一种方法。 在互联网上的某个地方找到了此代码。 它使用position:fixed
css样式,简单的js
javascript
<script type="text/javascript">
window.onload = function () {
$(window).scroll(function () {
var e = $("#StickyPanel");
if (document.documentElement.scrollTop >= 602 || window.pageYOffset >= 602) {
if ($.browser.msie && $.browser.version == "6.0")
{
e.css("top", document.documentElement.scrollTop + 15 + "px") }
else {
e.css({ position: "fixed", top: "1%" }) } }
else if (document.documentElement.scrollTop < 602 || window.pageYOffset < 602)
{
e.css({ position: "absolute", top: "91%" }) } }) }
</script>
的CSS
#search
{
position: absolute;
top: 91%;
}
只需更改值
602
根据您的需要
希望能帮助到你。
这是您要的: JSFIDDLE jsfiddle演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.