[英]Can't get my menu to work with “StickyPanel”
I'm kinda new to creating websites, so bear with me. 我对创建网站有点陌生,请耐心等待。
I just started a new project and I wanted a menu that follows when you scroll, and then stops when it reaches the top of the page. 我刚刚开始一个新项目,我想要一个滚动菜单,然后在到达页面顶部时停止。 I found a really cool JavaScript plugin called "StickyPanel"
( https://code.google.com/p/sticky-panel/ ), but it won't cooperate. 我找到了一个非常酷的JavaScript插件,名为"StickyPanel"
( https://code.google.com/p/sticky-panel/ ),但无法配合使用。 Apparently there are no instructions and I can't find any useful info else where. 显然没有说明,在其他地方也找不到任何有用的信息。
The code is very simple: 代码很简单:
<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------>
Then I made a div
class called "header" and then styled the header-menu. 然后,我创建了一个名为“ header”的div
类,然后设置了标题菜单的样式。 I can't get the JavaScript to do anything with my header. 我无法使用JavaScript对标头执行任何操作。 What am I doing wrong? 我究竟做错了什么?
$("header").stickyPanel(stickyPanelOptions);
You ask Jquery for the elemet header You need to ask jquery the class header => 您向Jquery询问elemet标头您需要向jquery询问类标头=>
$(".header").stickyPanel(stickyPanelOptions);
Read about slectors its usefull! 了解有用的选音器!
<header> is a html5 element, support by almost all browser but dont forget display: block in css!
使用$(".header")
而不是$("header")
选择div
There is another way to it if you don't want to use this plugin. 如果您不想使用此插件,则还有另一种方法。 found this code somewhere on internet. 在互联网上的某个地方找到了此代码。 it uses position:fixed
css style, simple js 它使用position:fixed
css样式,简单的js
javascript 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 的CSS
#search
{
position: absolute;
top: 91%;
}
just change the values 只需更改值
602 602
according to your needs 根据您的需要
Hope it helps. 希望能帮助到你。
This is what you are asking for: JSFIDDLE jsfiddle demo 这是您要的: JSFIDDLE jsfiddle演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.